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Предисловие 


По данным международной организации Пиегпе! Мога $сасѕ 
(ГМ/5) количество пользователей Интернета в 2019 году во всем 
мире превысило 4 миллиарда человек и составило более 53% 
всего населения Земли, а в 2000 году этот показатель составлял 
лишь 200 миллионов. Такой бурный рост числа пользователей 
вызван постоянно растущим количеством и качеством серви- 
сов, которые можно получать через Интернет. Среди этих сер- 
висов и традиционная электронная почта, и популярнейшие 
социальные сети, и различные коммуникационные средства — 
мессенджеры, системы ІР-телефонии и т. п. 

Однако по-прежнему среди всех Интернет-сервисов особое 
место отводится возможностям быстрого поиска и удобного 
предоставления пользователям информации, размещенной 
во всемирной паутине, или У\ойА УЛае УеБ (МГУ). Техноло- 
гии сетевого взаимодействия, которые традиционно использо- 
вались для работы поисковых систем в среде МГГУ, постепен- 
но распространяются и начинают применяться в реализации 
самых разных сетевых приложений и сервисов. 

Вместо отдельных почтовых сервисов используются почто- 
вые средства, интегрированные в поисковые системы, тради- 
ционные офисные приложения заменяются браузерными, ко- 
торые обеспечивают такую же полную функциональность. 

Корпоративные сайты, порталы и мер-приложения боль- 
шинства предприятий и организаций являются уже не просто 
Интернет-витринами. Они становятся необходимым условием 
конкурентоспособности и развития компаний, предоставля- 
ют возможность организации эффективных систем электрон- 
ной коммерции, вертикальной и горизонтальной интеграции. 
Важно также, что для внутреннего корпоративного управления 
в настоящее время также используются системы, основанные 
на принципах и технологиях мер-программирования. Это за- 
частую более эффективно, чем использование традиционных 
клиент-серверных систем, так как лучше отвечает условиям, 
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существующим в современной расширяемой и динамичной 
бизнес-среде. 

Каждый год мы наблюдаем, как улучшаются и развиваются 
Интернет-сервисы, которые государство предоставляет своим 
гражданам, предприятиям и организациям. 

Все вышеперечисленное становится возможным благо- 
даря очень быстрому развитию технологий разработки међ- 
приложений. В их основе лежат известные принципы орга- 
низации сети Интернет и протоколы взаимодействия внутри 
этой сети. Однако за годы развития этих технологий возникло 
множество языков, сред программирования, методов и техно- 
логий, которые позволяют создавать более привлекательные, 
динамичные, быстрые и эффективные приложения. Описание 
принципов, возможностей и основ применения таких техноло- 
гий и является целью данного учебного пособия. 

Чтобы использовать весь накопленный потенциал, совре- 
менный разработчик умер-приложений должен иметь представ- 
ление о принципах организации Интернета, системе адресации 
и базовых протоколах передачи данных, принципах разработки 
отдельных м’еЬ-страниц и сайтов в целом, базовом языке раз- 
метки умеђ-страниц НТМІ, технологиях описания стилей этих 
страниц (С55). При этом современный мер-сайт уже не может 
быть статичным и просто отображать некоторую информацию. 
Пользователь хочет иметь возможность обмениваться инфор- 
мацией, настраивать сайт под свои нужды, развивать его. По- 
этому в данном пособии предусмотрено изучение технологий 
клиентского и серверного программирования. 

Кроме того, практическая разработка мер-сайтов сегодня 
невозможна без использования готовых библиотек и фрейм- 
ворков, которые значительно облегчают процесс программи- 
рования и повышают качество создаваемого продукта. Осно- 
вы применения таких инструментов также будут рассмотрены 
в ходе изложения. 

И наконец, в современной меЬ-разработке широко применя- 
ются системы управления содержанием сайтов (СМ$-системы), 
позволяющие «собирать» сайт из некоторого набора готовых 
шаблонов. Рассмотрение этих технологий также будет предме- 
том нашего внимания. 

Теоретический материал, представленный в данном учеб- 
ном пособии, подкрепляется практическими заданиями, пред- 
ложенными во второй части издания — практикуме. 
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В результате изучения изложенного в пособии материала 
студенты должны: 

знать 

• принципы организации современных Интернет-техноло- 
ГИЙ, 

• основные протоколы передачи информации по сети Ин- 
тернет, 

• системы адресации в сети Интернет, 

• основы организации клиент-серверного взаимодействия, 

• основы организации системы МУГУ, 

• основные языковые, программные и инструментальные 
средства создания уғер-приложений; 

уметь 

• применять современных языковые средства для разметки 
и оформления мер-страниц, 

• создавать статические и динамические м’е-сайты, 

• создавать сайты, адаптируемые к отображению на раз- 
ных типах устройств, 

• использовать клиентские и серверные технологии сбора, 
хранения, обработки и передачи информации при организа- 
ции међ-приложений; 

владеть 

• навыками, связанными с выбором и применением наи- 
более эффективных инструментов разработки, 

• навыками отладки и тестирования работы отдельных 
компонентов программ и приложений в целом. 

Представленное пособие может использоваться для изуче- 
ния теоретической и практической части дисциплин, связан- 
ных с технологиями современной међ-разработки студентами 
специальностей Программная инженерия, Компьютерные си- 
стемы и сети, Системный анализ и т. п. 


ТЕОРЕТИЧЕСКАЯ 
ЧАСТЬ 
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Тема 1 
ОСНОВНЫЕ ПОНЯТИЯ И ПРИНЦИПЫ 
МЕВ-ТЕХНОЛОГИЙ 





После изучения данного раздела студент должен 
знать 


принципы организации сети Интернет, 
базовые протоколы обмена информацией в глобальной компью- 


терной сети, 


принципы адресации, 

назначение и принципы организации системы доменных имен, 
сущность и принципы организации сети МУГ, 

назначение и принцип работы протокола НТТР, 

проблемы и основные направления организации систем обеспе- 


чения безопасности в сети Интернет, 


сущность сооКіеѕ; 


уметь 


использовать адреса ресурсов Интернет, 

распознавать содержимое НТТР-запросов, 

распознавать базовые и прикладные протоколы передачи данных, 
соотносить прикладные протоколы с использующими их типами 


прикладных приложений. 


1.1. Интернет как среда для мер-взаимодействия 


Всемирная паутина, или система гипертекстовых докумен- 
тов Мой УПае МеЬ (ҰГУГУГ) является одним из важнейших 


сервисов, благодаря которому пользователи могут быстро нахо- 
дить и использовать информацию, хранящуюся на множестве 
различных компьютеров в любой части Интернета. Поэтому 
для понимания основных принципов организации и функцио- 
нирования МҮ необходимо, прежде всего, понять принципы 
организации и функционирования Интернета. 
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Итак, Интернет — это глобальная всемирная компьютерная 
сеть, не имеющая единого центра управления, но работающая 
по единым правилам и предоставляющая своим пользователям 
единый, постоянно расширяюшийся набор услуг. 

Структура Интернета может быть представлена как сово- 
купность связанных между собой более мелких компьютерных 
сетей. При этом в сети существуют организации, называемые 
поставщиками услуг Интернета (15Р, ГиегпеЕ 5$егусе Ргоуійег). 
Они владеют Интернет-серверами и каналами передачи дан- 
ных разных уровней. Глобальные провайдеры предоставляют 
свои ресурсы региональным провайдерам, те, в свою очередь, 
локальным провайдерам, которые уже предоставляют Интер- 
нет-ресурсы и сервисы конечным пользователям (частным 
лицам или организациям). 

Проблема организации взаимодействия состоит в том, что 
компьютеры, подключенные к Интернет, различаются аппарат- 
ной или программной системой (платформой), имеют разное 
прикладное программное обеспечение, разные средства для 
физического соединения с сетью и т. д. Таким образом, Ин- 
тернет является очень сложной структурой, и соответственно, 
такой же сложной является задача организации стабильного 
взаимодействия между ее узлами. 

Для решения этой задачи был использован многоуровне- 
вый подход, который рассматривает процесс взаимодействия 
между двумя любыми компьютерами, подключенными к се- 
ти Интернет, как последовательное применение некоторого 
единого пакета технологий. Каждый уровень этого процесса 
позволяет выполнить одну из подзадач процесса взаимодей- 
ствия, а затем передать результат выполнения этой подзадачи 
на следующий этап. Основная идея взаимодействия состоит 
в том, что каждый уровень должен обеспечивать интерфейс 
не только с соседними уровнями, но и с аналогичным уровнем 
второго узла. 

Такой пакет технологий, обеспечивающий «взаимопонима- 
ние» любых двух компьютеров, подключенных к сети Интернет 
называется стеком Интернет-протоколов. 


Здесь уместно привести известную аналогию — дипломати- 
ческий протокол. Взаимодействие между представителями госу- 
дарств на международных встречах осуществляется строго на соот- 
ветствующем уровне: президент — президент, премьер-министр — 
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премьер-министр и т. п. При этом внутри делегации происходит 
обмен информацией между различными уровнями иерархии. 





Таким образом, сложная задача взаимодействия различных 
узлов в сети разбивается на ряд более простых задач. 


1.2. Основные Интернет-протоколы 


Рассмотренный нами выше принцип декомпозиции задачи 
взаимодействия между любыми двумя компьютерами в сети 
Интернет является основой существующей модели сетевого 
взаимодействия, которая получила название ТСРЛІР (проис- 
ходит от названий двух важнейших протоколов семейства — 
Тғапѕтіѕѕіоп Сопёго[ Рготосо[ (ТСР) и ГегпеЕ Ргоѓосої! (1Р)). 

Эта модель предполагает, что взаимодействие реализуется 
через четыре уровня: 

— самый верхний из них, прикладной, обеспечивает обра- 
ботку информации, сформированной отправителем и поступа- 
ющей от какой-либо прикладной программы, или информации, 
которая должна быть принята соответствующей прикладной 
программой и продемонстрирована получателю; 

— ниже располагается транспортный уровень, обрабатыва- 
ющий связь между узлами; 

— еще ниже располагается сетевой (межсетевой) уровень, 
обеспечивающий межсетевое взаимодействие между независи- 
мыми сетями; 

— и на самом нижнем уровне, канальном, определяются 
методы связи для данных, которые остаются в пределах одного 
сегмента сети. 

Для пояснения принципа работы стека протоколов ТСР/ 
ЇР чаще всего используется аналогия с работой обычной почто- 
вой системы. Письмо перед отправкой снабжается почтовыми 
адресами получателя и отправителя. Адрес получателя анали- 
зируется в ближайшем почтовом отделении, после чего письмо 
отправляется далее через цепочку других почтовых отделений 
до тех пор, пока не достигнет адресата. В конечном почтовом 
отделении контролируется сохранность и конфиденциальность 
почтового отправления. 

Каждый компьютер, подключенный к сети Интернет то- 
же имеет уникальный адрес, который называется ІР-адресом 
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(ПиетпеЕ Ргоѓосої Аайгеѕѕ). ІР-адрес состоит из четырех деся- 
тичных чисел от 0 до 255, разделенных точкой (например 
195.34.32.116.). Кроме того, в зависимости от того, какая 
именно программа (например, браузер, 5Куре или почтовый 
клиент) создала передаваемое сообщение, адрес дополняется 
также номером порта (каждая программа традиционно при- 
вязана к определенным портам). Сохранение номера порта по- 
зволяет адресату узнать, какая программа сможет «принять» 
передаваемое сообщение. Комбинация ІР-адреса и номера пор- 
та называется сокетом. 

Далее сообщение, передаваемое через Интернет, проходит 
несколько уровней, при этом задействуются различные состав- 
ляющие стека Интернет-протоколов. 

На верхнем, прикладном, уровне работают такие протоко- 
лы, как НТТР (для передачи как раз гипертекста в среде МММ), 
ЕТР (для передачи файлов), ЗМТР и РОРЗ (для приема и пере- 
дачи электронных писем, созданных при помощи программ-по- 
чтовых клиентов) и т. п. Подробнее мы рассмотрим некоторые 
из них ниже, однако необходимо указать, что эти протоколы, 
для своего типа передаваемой информации, позволяют разде- 
лять сообщение на пакеты определенной длины. 

ТСР (Тгапѕтіѕѕіоп Сопіто! Ргоюсо[ — протокол управления 
передачей) и Орр (Оѕег Раазтат Ргоѓосої, протокол датаграм 
пользователя) — это протоколы транспортного уровня. На этом 
уровне, полученные от прикладного уровня пакеты снабжают- 
ся ІР-адресом получателя и некоторой другой вспомогательной 
информацией, к пакету добавляется порт отправителя и порт 
получателя. 

ТСР — это протокол с установлением соединения и с гаран- 
тированной доставкой пакетов. Сначала производится обмен 
специальными пакетами для установления соединения, далее 
по этому соединению посылаются пакеты, причем с проверкой, 
дошел ли пакет до получателя. Если пакет не дошел, то он по- 
сылается повторно. 

ПОР — это протокол без установления соединения и с не- 
гарантированной доставкой пакетов. 

Протокол ІР (ПиегпеЕ Ргоюосо[, межсетевой протокол) — это 
протокол сетевого уровня. Именно он отвечает за прохождение 
каждого пакета по цепочке свободных в данный момент участ- 
ков сети от компьютера отправителя к компьютеру получате- 
ля. Номера портов на сетевом уровне не используются. Какому 
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порту, т. е. приложению адресован этот пакет, был ли этот па- 
кет доставлен или был потерян, на этом уровне неизвестно — 
это не его задача, это задача транспортного уровня. 

Канальный уровень — уровень передачи данных внутри 
одного сегмента сети. В стеке протоколов ТСР/ТР он специаль- 
но не определен, но поддерживает все современные стандарты 
организации сетей на физическом уровне: Еегпе, ТоКеп Ве, 
ЕРПІ, Еаѕє Есһегпег. На этом уровне выполняется: 

— перевод ІР-адресов в физические адреса компьютеров; 

— определение метода доступа к среде передачи, то есть 
способа, с помощью которого компьютер устанавливает свое 
право на передачу данных; 

— обработка возможных коллизий передачи; 

— определение того, в какой именно физической среде про- 
исходит передача данных (воздух, оптоволокно, коаксиальный 
кабель ит. п.). 

После доставки пакета получателю он обрабатывается всем 
стеком протоколов, но в обратном порядке — принимается транс- 
портными протоколами и, в случае успешного контроля качества 
передачи, передается на прикладной уровень и предоставляется 
пользователю при помощи соответствующего приложения. 


1.3. Система доменных имен 0№ 


Важнейшую роль при организации взаимодействия в сети 
Интернет имеет система именования узлов. Каждый компью- 
тер, подключенный к Интернету, должен иметь уникальное 
имя, но в некоторых случаях это имя должно быть запоминаю- 
щимся и отражающим некоторый смысл. 

Как мы все знаем из школьного курса информатики, компью- 
тер, как техническое устройство, способен хранить информацию 
в двоичной цифровой форме. Базовая адресация каждого Интер- 
нет-узла, [Р-адрес — это цифровое имя, состоящее из четырех 
чисел от 0 до 255. Однако пользователи — не машины, и для 
некоторых узлов сети, к которым часто обращается множество 
пользователей, наряду с цифровыми, выделяются буквенные 
имена, которые называются также доменными именами. 

Для установления соответствия между доменным именем 
и [Р-адресом используется специальная система доменных 
имен (0№8, Рота Мате 5уѕіет), которая основана на специ- 
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альных таблицах соответствия, которые хранятся на специаль- 
ных Р№-серверах в сети Интернет. 

В сетях ТСРЛІР используется доменная система имен, имею- 
щая иерархическую (древовидную) структуру. Данная структу- 
ра имен напоминает иерархию имен, используемую во многих 
файловых системах. Запись доменного имени начинается с са- 
мой младшей составляющей, затем после точки следует следу- 
ющая по старшинству символьная часть имени и так далее. По- 
следовательность заканчивается корневым именем, например, 
сотрапу.уапаех.ги. 

Построенная таким образом система имен позволяет раз- 
делять административную ответственность по поддержке уни- 
кальности имен в пределах своего уровня иерархии между раз- 
личными организациями. 

Совокупность имен, у которых несколько старших состав- 
ных частей совпадают, образуют домен имен. 

Корневой домен управляется центральными органами Ин- 
тернета: [АМА и Іпѓегпіс. 

Домены верхнего уровня назначаются для каждой страны, 
а также для различных типов организаций. Для обозначения 
стран используются двухбуквенные аббревиатуры, например, 
ги (Российская Федерация), иѕ (США), ії (Италия), В (Франция). 

Для различных типов организаций используются трехбук- 
венные аббревиатуры: 

— пе — сетевые организации; 

— оге — некоммерческие организации; 

— сот — коммерческие организации; 

— ейи — образовательные организации; 

— оу — правительственные организации. 

Перечисленные типы доменов верхнего уровня являются 
наиболее распространенными. Однако есть и другие варианты, 
которые вы можете встретить. 

Для получения доменного имени необходимо зарегистриро- 
ваться в соответствующей организации, которой организация 
Пицег МС делегировала свои полномочия по распределению до- 
менных имен. 


1.4. Структура и принципы организации МММ! 


Большинство ресурсов МММ основано на технологии ги- 
пертекста. Эту технологию предложил Тим Бернерс-Ли, ко- 
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торый в 1989 г. реализовал идею связывания публикуемых до- 
кументов гиперссылками на другие документы, что позволило 
значительно ускорить процессы поиска информации. Гипер- 
текстовые документы, размещаемые во Всемирной паутине, 
называются иеђ-страницами. Несколько меБ-страниц, объе- 
диненных общей темой и дизайном, а, также связанных между 
собой гиперссылками и обычно находящихся на одном и том 
же мер-сервере, называются иеђ-сайтом. 

Для задания ссылок на отдельные ресурсы (как правило, от- 
дельные файлы) в ММГ используются идентификаторы ресур- 
сов ОВТ (Ипфогт Кеѕоигсе Іаепіћег). Для определения местона- 
хождения ресурсов в сети используются локаторы ресурсов ОКІ. 
(Оп/огт Кеѕоигсе Іосаѓог). Такие ОКІ.-локаторы сопоставляют 
ОКІ с их ІР-адресами в системе доменных имен О№5. Основы 
использования универсальных идентификаторов и локаторов 
ресурсов были также заложены в работах Т. Бернса-Ли, Р. Кайо 
и нек. др. 


1.5. Протокол НТТР 


Как упоминалось выше, НТТР — это протокол прикладного 
уровня для передачи гипертекста. 

Протокол НТТР использует угер-сервер — программу для 
хранения м’ер-сайтов и обработки запросов пользователя 
на предоставление ему определенного меБ-ресурса, и програм- 
му-клиент, которая способна формировать запросы к серверу 
и отображать результаты этих запросов. 

Центральным объектом в НТТР является ресурс, на который 
указывает ОВТ, в запросе клиента. Обычно такими ресурсами 
являются хранящиеся на мгер-сервере файлы. 

Наиболее популярными реализациями м’ер-серверов яв- 
ляются: Іпѓегпег шЮгтаНоп Ѕегуісеѕ (П$), Арасћһе, Пе НТТРа, 
пешх. Клиентами служат браузеры, например, Соозе Сһготе, 
Орега, Мо7Ша Еігеѓох, Ѕаѓагі и другие. 

Классическая схема НТТР-сеанса предполагает установле- 
ние ТСР-соединения, запрос клиента, ответ сервера, разрыв 
ТСР-соединения. Обычно запрос клиента представляет собой 
требование передать НТМГ.-документ или какой-нибудь другой 
ресурс, а ответ сервера содержит код этого ресурса. 

На рис. 1.1 представлен типичный НТТР-запрос. 
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СЕТ һер: / /ммм .МУОгвап1та1оп.сот/ НТТР/1.1 

Ноѕ: ммм. МуОграпіғатіоп. сот 

Соппестіоп: Кеер-а1іуе 

Ассерт: +ехї/һЕт1, арр11са1оп/хНт1+хт1 , арр11са{1оп/хт1; 
Я = 0.9,*/*;а = 0.8 

Оѕег-Арепё: Мо2111а/5.0 (Міпаоиѕ МТ 6.1; МОИ6б4) 
Ассерї-Епсодіп=: 571р,аейате , ѕасһ 

Ассерї-Гапвиаве: еп-05;4 = 0.8,еп;а = 0.6 

СооКіе: _ райѕ = Ір = 422137294а4ат8а+:Т = 1368250765:5 = 
АІМІ МаоОАЕезу1Т9ѕућ; 

(пустая строка) 

(тело запроса) 


Рис. 1.1. Структура НТТР-запроса 


Начальная (первая) строка указывает метод запроса (СЕТ 
или РОЅТ), строку ОВ! и версию протокола НТТР. Необязатель- 
ные заголовки (строки 2—8) характеризуют сообщение, пара- 
метры передачи и предоставляют другую мета-информацию. 
В строке 10 представлено необязательное тело сообщения, со- 
держащее его данные, оно отделено от заголовков пустой стро- 


КОЙ. 


Метод СЕТ служит для получения любой информации, иден- 
тифицированной ОКІ-запроса. Другим распространенным ме- 
тодом в НТТР-запросах является метод РОЅТ, который позво- 
ляет отправлять данные для обработки на указанный ресурс. 

Теперь рассмотрим ответ на представленный запрос 


(рис. 1.2). 
1. НТТР/1.1 200 ОК 
2. Сасһе-СопЁго1: ргімаїе 
3. Сопёепё-Туре: Тех/һт1 
4. Сопепё-Епсойіпе: ргір 
5. Магу: АссерЕ-Епсодіпе 
6. Ѕегмег: МісгоѕоҒЕ-115/7.5 
7. Ѕеё-Соокіе: АЅРЅЕ55ІОМІРООКВАСТА = ЕОССТМТСЕРАМЕКООМКТВЕОЭР; 
раһ = / 
8. Х-Ромегеа-Ву: АЅР.МЕТ 
9. рате: Ѕип, 04 АцБ 2013 13:33:59 СМТ 
10. Сопёепї-Гепеєһ: 8434 
11. (пустая строка) 
12. (содержимое страницы) 


Рис. 1.2. Структура НТТР-ответа 


Первая строка представляет собой версию протокола НТТР 
и код статуса ответа. Код 200 означает, что ресурс был най- 
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ден, а в случае неудачного запроса будет возвращен код 404, 
403 или какой-либо другой. Необязательные заголовки (стро- 
ки 2—10) предоставляют различную мета-информацию об от- 
вете. В строке 12 представлено тело сообщения, следующее 
за заголовками, которое должно быть отделено от них пустой 
строкой. Тело ответа, как правило, содержит НТМІ -код запра- 
шиваемой веб-страницы. 

В отличие от многих других протоколов, НТТР является про- 
токолом без памяти. Это значит, что в процессе взаимодействия 
не сохраняется информация о предыдущих запросах клиентов 
и ответах сервера. Однако все пользователи Интернета заме- 
чают, что после ввода и обработки некоторого запроса браузер 
запоминает эту информацию, и впоследствии предоставляет 
ее в форме рекламы, помощи в строках ввода и т. п. Это стано- 
вится возможным благодаря использованию механизма соо1е, 
который позволяет серверу хранить информацию на компью- 
тере клиента и извлекать ее оттуда. 

Инициатором записи сооКіе выступает сервер. Если в ответе 
сервера присутствует поле заголовка Ѕеѓ-сооКіе, клиент-брау- 
зер воспринимает это как команду на запись сооКіе. В дальней- 
шем, если клиент обращается к серверу, от которого он ранее 
принял поле заголовка $еѓ-сооКіе, помимо прочей информации 
он передает серверу данные сооКіе. 


1.6. Безопасность НТТР 


Поскольку протокол НТТР предназначен для передачи сим- 
вольных данных в открытом (незашифрованном) виде, то ли- 
ца, имеющие доступ к каналу передачи данных между клиен- 
том и сервером, могут без труда просматривать весь трафик 
и использовать его для совершения несанкционированных дей- 
ствий. В связи с этим был разработан ряд расширений базового 
протокола, направленных на повышение защищенности интер- 
нет-трафика от несанкционированного доступа. 

Наиболее распространенным является расширение НТТР$, 
при котором данные, передаваемые по протоколу НТТР, «упа- 
ковываются» в криптографический протокол $551, или ТТ$, тем 
самым обеспечивая защиту этих данных. Чтобы подготовить 
уеБ-сервер для обработки НТТР5 соединений, администратор 
должен получить и установить в систему сертификат для этого 
угеЪ-сервера. 
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Контрольн ые вопросы 


Как вы можете определить понятие МУМ? 
Почему важны стандарты Интернета? 
Что такое стек Интернет-протоколов? 
Какова роль протоколов ТСРЛІР в информационном обмене 
в сети Интернет? 

5. Какие протоколы прикладного уровня вам известны? 

6. Как организована система адресации в Интернете? Для чего 
нужна система доменных имен? 

7. Какой основной протокол прикладного уровня используется 
в системе МҮМ? 

8. Какова структура запроса НТТР? 

9. Как обеспечивается безопасность передачи данных в \УМеЬ? 

10. Что такое сооКіе? 


о за 
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Тема 2 
ОСНОВЫ ЯЗЫКА РАЗМЕТКИ 
ГИПЕРТЕКСТА НТМІ 





После изучения данного раздела студент должен: 

знать 

• назначение и основные особенности языка НТМІ,, 

• правила описания структуры документа НТМІ, 

• основные теги описания элементов страницы на языке НТМІ, 

• принципы описания свойств элементов, 

• дополнения к языку, введенные в версии НТМІ5; 

уметь 

• описывать служебную информацию о документе в области за- 
головка НТМГ-документа, 

• описывать содержимое уғеђ-страницы с использованием тегов 
языка НТМГ, 

• структурировать документ с применением тегов заголовков, 
абзацев, таблиц, списков, блоков, 

• иллюстрировать страницы с использованием изображений, 

• организовывать гиперссылки на другие НТМІ-документы, 

• создавать формы пользователя; 

владеть 

• навыками выделения структурных блоков НТМГ-страницы с при- 
мененением таблиц и блоков. 





2.1. Назначение и особенности НТМЕ 


Кроме платформенно-независимых средств передачи ин- 
формации в системе ММ, включающих использование стека 
протоколов ТСРЛР и прикладного протокола передачи гипер- 
текста НТТР, для успешного развития этого сервиса требовал- 
ся удобный, понимаемый всеми браузерами, развивающийся 
язык, на котором можно было бы создавать гипертекстовые 
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документы. Поэтому одним из главных компонентов техноло- 
гии создания распределенной гипертекстовой системы Мота 
\МЛае У/еЬ стал язык гипертекстовой разметки НТМІ. (НурегТехе 
Магкир Іапғиаве). Удобство его применения обусловлено сле- 
дующими двумя его особенностями. 

1. Формат такого гипертекстового документа — обычный 
текстовый файл. Поэтому его можно создавать с помощью лю- 
бого текстового редактора (в простейшем случае — блокнота), 
хотя в настоящее время создано множество специализирован- 
ных редакторов, позволяющих быстрее и с меньшим количе- 
ством ошибок создавать и структурировать такие документы. 

2. В НТМІ реализована теговая модель описания докумен- 
та. То есть структура и содержимое документа определяются 
специальными метками — тегами, внутри которых помещают 
информацию о том, как браузер должен трактовать данный 
блок. 

Таким образом, сайт в концепции ММУ — это набор тек- 
стовых файлов, размеченных на языке НТМГ, который опреде- 
ляет форму представления информации (разметка) и структу- 
ру связей между этими файлами и другими информационными 
ресурсами (гипертекстовые ссылки). 

Из курсов информатики и программирования мы знаем, 
что любой интерпретируемый язык высокого уровня требует 
перевода его инструкций на язык команд, которые могут быть 
понятны компьютерной системе. В Мога УПае М’еЬ функции 
интерпретатора разделены между мер-сервером и интерфей- 
сом пользователя, функции которого реализованы в браузере. 
Сервер, кроме доступа к документам и обработки гипертек- 
стовых ссылок, обеспечивает предпроцессорную обработку 
документов, в то время как браузер осуществляет интерпрета- 
цию конструкций языка, связанных с представлением инфор- 
мации. 

Итак, документ, написанный (иногда говорят «размечен- 
ный») с использованием языка НТМІ. — это просто текст, раз- 
деленный на отдельные структурные или содержательные эле- 
менты. Эти элементы окружены одинаковыми открывающими 
и закрывающими командами — тегами. Каждый тег начинает- 
ся и заканчивается с угловых скобок (< и >). Структуру любо- 
го тега можно рассмотреть на следующем примере: 


<р>Не11о мог1а!</р> 
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Здесь используется тег <р>, который позволяет выделить 
отдельный абзац, содержащий тот текст, который находится 
между «открывающей» частью тега <р> и ее «закрывающей» 
частью </р>. 

Многие теги можно снабжать атрибутами, которые допол- 
няют сведения о том, как именно браузер должен отобразить 
данный элемент. 

В качестве общих правил написания НТМЕ документов не- 
обходимо отметить следующие: 

— нужно выделять новую строку для каждого блочного, та- 
бличного или списочного элемента; 

— ставить отступы для каждого дочернего элемента, отсту- 
пы должны составлять минимум 2 пробела; 

— не следует использовать заглавные буквы для тегов, толь- 
ко строчные; 

— всегда нужно использовать закрывающий тег; 

— в начале документа желательно указывать его тип: 


<! ООСТУРЕ һҺЕт1> 


— для комментирования текста программы следует исполь- 
зовать символьные скобки <! >. 

Как было сказано выше, НТМІ. активно развивается. На мо- 
мент написания данного учебного пособия актуальной версией 
является НТМІ5. Поэтому в дальнейшем изложении мы рассмо- 
трим базовые возможности языка НТМІ, а, при необходимо- 
сти будем указывать на особенности, связанные с переходом 
на версию НТМТЬ. 

Далее рассмотрим структуру и назначение тегов языка 
НТМЕ более подробно. 


2.2. Структура документа на НТМЕ 


Итак, каждый отдельный документ НТМЕ, может быть рас- 
смотрен как контейнер, внутри которого размещается все его 
содержимое. Все содержимое файла помещается между откры- 
вающим и закрывающим тегом <>. 


<! БОСТУРЕ ҺЕт1> 
Содержание документа 
</ тт > 
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Контейнер Вит] или гипертекстовый документ содержит два 
других вложенных контейнера: заголовок документа (ћеад) 
и тело документа (Боду). Рассмотрим простейший пример 
классического документа. 


<!БОСТУРЕ Пт1> 
<һеаа» 
<+141е>Мой первый документ</+1+1е> 
</һеаа» 
<боау> 
<һ1> Заголовок документа </һ1> 
<р>Это содержимое единственного абзаца документа</р> 
</Боау> 
</ћЕт1> 


Заголовок НТМГ-документа (то, что помещено внутрь кон- 
тейнера Һеааӣ) является необязательным элементом разметки. 
Но, для быстрой индексации страницы поисковыми машина- 
ми, продвижения этого ресурса в списках выдачи поисковых 
систем, корректности отображения документов браузерами 
служебная информация, содержащаяся в области заголовка 
имеет очень важное значение. 

Внутри тегов ћеаа могут размещаться следующие элементы, 
окруженные в свою очередь, своими тегами. 

Элемент разметки е служит для именования вкладки 
окна браузера, в котором просматривается документ. Роботы 
многих поисковых систем используют содержание элемен- 
та іе для создания поискового образа документа. Слова 
из НЧе попадают в индекс поисковой системы. Поэтому эле- 
мент (11е всегда рекомендуется использовать на страницах 
утер-сайта. 

Элемент разметки Базе служит для определения базового 
ОВГ для гипертекстовых ссылок документа, заданных в непол- 
ной (частичной) форме. 


<Базе һге# //сҒи. сгітеа-ги/ѕ+агі/> 
<Базе пге+ = ../пехі Іеме1/аоситеп& .НТМі > 


Во втором случае в качестве базы по умолчанию выбирается 
каталог, в котором размещен НТМГ-документ ( ../ ). 

Элемент разметки теѓа содержит управляющую информа- 
цию, которую браузер использует для правильного отображе- 
ния и обработки содержания тела документа. 
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Для определения кодировки документа: 


<тефа сһагѕе = "иЁғ-8" > 


Для указания информации о документе: 


<тефа пате = "аиһог" сопфепф = "Системный анализ" > 


Для описания страницы и задания ключевых слов: 


<тефа пате = "аеѕсгірііоп" сопёепё = "Методы системного анализа" > 
<те+а пате = "Кеумогаѕ" сопфепе = "моделирование, системный 
анализ, системный подход, синтез, принятие решений" > 


Для указаний роботу! индексировать, отслеживать гиперс- 
сылки на странице: 


<тефа паме = "гороёѕ" сопфепЕ = "іпаех, Ғо110ом"> 


Элемент разметки Їіпк наиболее часто используется для под- 
грузки файлов, содержащих стили оформления документа. 


<Ііпк геї = °у1езПееф Игеф = "../с55/51у1е.сѕ5" фуре = 
"Еехі/сѕ5"> 


В данном случае речь идет о загрузке стилей из файла 
ѕсуІе.сѕ5, который хранится в виде каскадной таблицы стилей 
(5суІеѕћее?) по адресу, указанному в динамической ссылке при 
помощи атрибута һхеѓ (подробнее об этом мы поговорим в сле- 
дующем разделе). 

Элемент разметки ѕѓуіе подключает внутренние таблицы 
стилей. 


<ѕ+у1Іе Журе = "Еехї/сѕ5"> 
р{ 
браскегоипа-со1ог: #е+#4444; 
со1ог: #666666; 


} 
</ѕ+у1е»> 


1 Поисковый робот — специальная программа, принадлежащая опреде- 
ленной поисковой системе и предназначенная для индексирования (занесе- 
ния в базу сайтов поисковой системы) веб-сайтов и их страниц, найденных 
в интернет-пространстве. 
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В этом примере указано, что для всех абзацев (тег <р>) 
должны быть применены заданный цвет фона и шрифта. 

После завершения описания заголовка НТМІ-документа 
и закрытия элемента разметки < Љеааӣ>, открывается элемент 
разметки Боду (тело документа), внутри которого располага- 
ются все элементы, которые и составляют описываемую стра- 
ницу и видны пользователю при просмотре ее в браузере. 


2.3. Основные теги тела документа НТМЕ 


Базовые теги, позволяющие описать структуру и содержа- 
ние тела НТМІ-документа, а, также дополнительные теги, по- 
явившиеся в версии НТМІ5, представлены в табл. 2.1. 

Открывающие теги могут содержать атрибуты. С их помо- 
щью можно менять свойства объекта, которому соответствует 
тег. Порядок следования атрибутов в теге не важен. Атрибуты 
записываются внутри открывающего тега через пробел от его 
имени в виде отдельного ключевого слова или ключевого слова, 
знака « = » и параметра (значения атрибута). Атрибут меняет 
свойство элемента, работающее по умолчанию. Он действует 
от открывающего тега, в котором он задан, до закрывающего 
или только внутри тега, если тег не имеет парного. 

В версии НТМІ5 появилось несколько новых тегов, которые 
помогают автоматически распознавать структуру документа. 
Вместо <аіу с1а5ѕ = «Веа4ег»> стоит писать просто <Веа4ег>. 
Аналогичным образом можно использовать теги <агаще>, 
<аѕійе>, <ѓооѓег>, <пау>, которые заменяют привычный 
<аіу>. Такие теги позволяют более точно описать содержание 
основных функциональных разделов страницы. 

Ниже приведен пример простой страницы, размеченной 
с использованием блоков и встроенных стилей. 


<!-- Начало Меб-страницы --> 
<!РОСТУРЕ һЕт1> 
<Ит1> 
<!-- Начало заголовка Иер-страницы --> 
<һеаа» 
<!-- Описание метаданных, т. е. информации о МеђБ-странице. --> 


<МЕТА НТТР-ЕООІМ = "Сопёепё-Туре" СОМТЕМТ = "&ех/һт1; 
сһагһѕеї = ШТЕ8" > 

<!-- Описание надписи на вкладке браузера --> 

<{1{1е>Пример</{1*1е> 
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тянАн иодотя 
тянАи ича4энц 


тянАн иодотя (< 
тянАи ичя4эн (Т 


<Тп/> 
<тт/>1хнКи иоЯо19<тТ> 
<тТ/>1хнКи иадӢәи<тт> 

<Тп> 


<То/> 
<тт/>1хнКи иоЯо1Я<тТ> 
<тТ/>1хнКи ичааэц<тт> 

<То> 


епил, о1одош ех> 
-ипо етянАи пэноя И оивьен 


«ТТ/><т> 





евяипә отоннея 
-ойихври пэнох и оиеьен 


<Тп/><Тп> 





ея2ипо отон 
-неяодәи/н пэнох и оиеьен 


<То/><то> 





тохэт ичняитен4элчие иишо!Аятотоя 
-1002 вогиякоп кинәжеаідоғи ииялотАрто 
иа 'и3`эЗеип иәнәии ә эциеф я вэээш 
-крохен ‘әинәжеддоғи онәпәя1чя Іәрҝд 


(шс мәнәми ә 
тнэиАзог ен тәрәя ке4отоя ‘“ияша2ә 
әгия я) тнэмАхог иодотя ен итиэдэ| 





< „әинәжеддоғи, = зте 
„313°`әЗешт/8шт, = 245 Зшт> 


<е/> 
інәм/хо иодола ен игиәаәц 
<.Тш3Ч'с, = 3944 е> 


иинәжеадоғи почча 


яо9эаэпил гоячя 


<е/><е»> 





пезое иодотя о1є 
пе=ое инчя4эн о1Є 


С ХОЯОГОТеє 


І ЗоОЯоОКОТеє 


віріягАғәа эинеэипо 


ге оћпидр/ 





‹а/> 
пеєое иодо1я о4Е 
<а> 
<а/> 
пе=ое ичаядэи о1Е 
<а> 


<сЧ/>с хояоноле=<сц> 
<ТЧ/>Т хояоно-ле=<туц> 


ТМІН изә! э1930=е9 


Ічпеєдв ен етояэт әинәкәрєед 


Ч ог ТЧ то 
яояяоголеє иәняойХ 9 


ЭИНЭБЕНЕЕН 





<9/><а> 


<94/><9Ч> 
- <ТЧ/><ТЧ> 
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эинэниопен әодо 91190 тэжом Ого 
-отоя ий1ќня ‘тэреэц модоленифитноги э 
мояоно вотэезчзино еяяоголе= 912200 


<лтр/> 
чэреэн 
<„чэреэц, = рт лтр> 


ияоо ен 
апинето эинэцэгееа 


<лрр/> 
<лтр> 





І9п901ә 9ІкНИӘЯ90 
онжАн ишәә 
иэд5агопэи че $[оЭ 





ихоато Т || ихоато т 
пәдгоІо с || Пэдцото Т 





ететчиА$э4 эинезипо 


[72 `и9рш әпноһнохо) 





<әтде2/><22/> 
<р3/> 
9чп9и015 91ннигэя9до 
онжАН ишэә 
мәЌЕаиоцои чед5ТоЭ 
< = чед$То> р3> 
<43> 
<22/> 
<р2/> 
ихоаіо Т пәдио1о с 
< р3> 
<рз/> 
ихойіо Т Пэ9ио15 Т 
< рз> 
<43> 
<%0с = Чзртм чләрлод эт4ез> 


ихоато хеиэпэ4и я 1чпииоет 
епоголо пэнох и оиеьен 


І9пиговІ 
изо41> пэноя и оиеьен 


9пигоет пәноя и океһенң 


ЭИНЭБЕНЕЕН 





<р3/><р3> 


<43/><43> 


‹этаез 
/><этаез> 
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<!-- Описание стилей документа -- > 
<5фу1е фуре = "ЕехЕ/с55"> 
һ1{ 


/* Описание цвета текста заголовка 1 уровня*/1 
со1ог: геа; 
/* Размер шрифта */ 
Ғопё-ѕ5іғе: 26рх; 
/* Тень текста */ 
Техї-ѕһайом: 2рх 2рх 5рх мһі+е; 
/* Тень блока */ 
рох-ѕһааом: 2рх 2рх 5рх Б1ие; 
/* Выравнивание текста */ 
Техї-а1ірп: сепїег; 
/* Цвет фона */ 
баскегоипа: вгау; 
/* Ширина объекта */ 
міаєћ: 560рх; 

} 

Боау{ 
/* Описание цвета текста */ 
со1ог: Б1ие; 

І 

р{ 


/* Размер шрифта для обычных абзацев*/ 
ФопЕ-$17е: 16рх; 
| 
</ѕ%у1е» 
</һеаа» 
<!-- Описание объектов ИМеһБ-страницы --> 
<Боау> 
<!-- Заголовок 1 типа --> 
<һ1>Это пример заголовка</һ1> 
<!-- Обычный текст --> 
<р>Это пример текста страницы</р> 
</Боау> 
</ҺЕм1> 


В результате получим следующую страницу: 


зно прерии 


пример текста странице 


Рис. 2.1. Пример простой страницы 
с использованием встроенной таблицы стилей 


1 При разметке документа следует учитывать, что формат комментариев 
в блоке описания стилей отличается от используемого в остальной части до- 
кумента. — Прим. ред. 
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2.4. Формы НТМЕ 


Важнейшей особенностью языка разметки уеђ-страниц яв- 
ляется возможность организации пользовательского интерфей- 
са. Современный сайт должен не только предоставлять пользо- 
вателю актуальную, важную и удобно читаемую информацию, 
но и получать от него ответную реакцию. Для этого служит 
группа тегов, которые обычно объединяются внутри тегов 
<Югт> и < /огт> 

Тег <ѓЁогт> выделяет фрагмент документа как форму 
и определяет границы использования других тегов, размещае- 
мых в форме. Атрибуты тега <Югт> определяют, какой файл 
или программа будут обрабатывать полученную из формы ин- 
формацию, а также, каким методом будет осуществлен НТТР- 
запрос. Обычно это методы СЕТ или РОЅТ (см. первый раздел). 

Например: 


<Фогт теһоа = РО$ЗТ ас 1оп = "геѕи1+.рһр"> 


Здесь предполагается, что данные формы будут переданы 
для обработки файлу с именем гезий.рЮр методом РОЅТ. 

Основной тег, который может использоваться внутри фор- 
мы — это тег <шриЕ> < /іприѓ>. 

Тег <іприѓ> используют для определения области внутри 
формы, куда вводятся данные. Это может быть текстовое поле, 
опция, изображение или кнопка. Вид поля ввода определяется 
значением атрибута ёуре. Рассмотрим основные из этих типов. 

Атрибут уре = "ехЕ". Когда пользователю необходимо вве- 
сти небольшое количество текста (одну или несколько строк), 
используется тег <ІЧРОТ>, и атрибут ѓуре устанавливается 
в значение «їехі». Это значение принято по умолчанию и ука- 
зывать его необязательно. Кроме того, задается атрибут пате 
для определения имени этого поля ввода, для дальнейшей об- 
работки полученного из него значения. Имеется еще три до- 
полнительных атрибута, которые можно использовать. Первый 
называется тащеп®й, он ограничивает число символов, вво- 
димых пользователем в текущее поле. По умолчанию данное 
число не ограничено. Вторым атрибутом является $15е, опре- 
деляющий размер видимой на экране области, занимаемой 
полем. Значение по умолчанию определяется типом браузера. 
Если значение тажепяй больше, чем ѕЅізе, браузер будет про- 
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кручивать данные в этом окне. Последним из дополнительных 
атрибутов является атрибут уаше, обеспечивающий значение 
поля ввода по умолчанию. 


<р> 
ваше имя: <іпри паме = "ЕТО" ѕіғе = 35 уа1ие = 
"Фамилия И. 0."> 
</р> 
Результат: 
ваше имя: Фамилия И.О. 
Атрибут уре = "сһескһох" используется для создания не- 


зависимых флажков. При этом указываются также атрибуты 
пате и уаше. В некоторых случаях необходимо инициализи- 
ровать данный флаг как уже отмеченный. В таких случаях тег 
<іприс> должен содержать атрибут сһескеа: 


<р> 
Язык 1: <іприї пате = "язык1" фуре = "сһескбох" уа1ие = “"НТМЕ"> 
</р> 
<р» 
Язык 2: <іпри паме = "язык2" уре = "сһескрох" уа1ие = 
"95сг1ре" сһескеа > 
</р> 
Результат: 
Язык 1: 0 
Язык 2: 


Атрибут ѓуре = "гайіо" применяют, когда требуется орга- 
низовать выбор одного из нескольких возможных значений. 
Для этого в теге <іприё> должны быть указаны атрибуты пате 
и уаше. Но атрибут пате должен содержать одно и тоже значе- 
ние для всех вариантов выбора. 


<р> 
Пол мужской: <1приф пате = "пол" %уре = "гад1о" 
уа1џе = "мужской" > 

</р> 
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<р> 

Пол женский: <іприё пате = "пол" Журе = "гад1о" уа1ие = "жен- 
ский" > 
</р> 


Результат: 
Пол мужской: О 


Пол женский: ® 


Атрибут їуре = "ра5$иога". Применяют для ввода пароля. 
Используя данный тип, можно организовать ввод пароля без 
вывода на экран составляющих его символов. При этом следу- 
ет помнить, что введенные данные передаются по незащищен- 
ным каналам связи и могут быть перехвачены. 


<р> 
введите логин:<1приф пате = "1оріп" > 
</р> 
<р» 
Введите пароль:<іприё +уре = "раѕѕмога" паме = "раѕ5"> 
</р> 


Результат: 





введите логин: Зидег 
Введите тароь 4 


Атрибут гуре = "гезе!". Когда пользователь заполняет фор- 
му, ему может потребоваться начать все сначала. Для этого су- 
ществует кнопка Кеѕеѓ, щелкнув по которой, пользователь мо- 
жет вернуться к первоначальным значениям полей. 











<іприё Фуре = "гезеЕ" уа1ие = "очистить форму" > 


Результат: 





очистить форму | 
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Атрибут гуре = "зибтй" используется для организации 
подтверждения отправки формы. Браузер выводит данный 
элемент как кнопку, по которой пользователь может щелкнуть, 
чтобы завершить процесс редактирования. Важно в этом слу- 
чае использовать атрибут пате, так как с событием нажатия 
на этот элемент часто связывают начало программной обра- 
ботки данных формы. 


<р> 
<іприє Журе = "ѕиртіё" пате = "Биоп1" 
уа1ие = "отправить данные" > 

</р> 


Рассмотрим еще несколько тегов, которые могут входить 
в блок формы. 

Тег <{ех(агеа>. В некоторых случаях может потребоваться 
организовать ввод большого количества текста. В таких слу- 
чаях используется тег <{ех{агеа> для создания текстового по- 
ля из нескольких строк. Данный тег использует три атрибута: 
сої, пате и гом. Атрибут со[5 определяет количество колонок, 
содержащихся в текстовой области, атрибут пате определяет 
наименование поля, атрибут гоиѕ задает количество видимых 
строк текстовой области. 


<р> 
Введите сюда Ваш отзыв: 
<+ех+агеа паме = "тема" со15 = "38" гом$ = "3"> 
</ёех+агеа> 
</р> 
Результат: 


Введите сюда Ваш отзыв: 





Тег <5@есЕ>. Когда формы НТМІ. становятся более сложны- 
ми, в них часто включают списки с прокруткой и выпадающие 
меню. Для этого используют тег ѕеІесі. Для определения списка 
пунктов используют тег <оріоп>. Тег <з@есЕ> поддержива- 
ет три необязательных атрибута: шире, пате и $17е. Атри- 
бут тире позволяет выбрать более чем одно наименование 
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из списка, атрибут пате определяет наименование объекта, 
атрибут $17е определяет число видимых пользователю пунктов 
списка. Если в форме установлено значение атрибута ѕіле = 1, 
то браузер выводит на экран список в виде выпадающего ме- 
ню. В случае $12е > 1 браузер представляет на экране обычный 
список. 

Тег <орНоп> используется только внутри тега <5@есе>. 
Он поддерживает два дополнительных атрибута: з@есфеа 
и уаШше. Атрибут з@есеА используется для первоначального 
выбора значения элемента по умолчанию, атрибут уае ука- 
зывает на значение, возвращаемое формой после выбора поль- 
зователем данного пункта. 


<р>выбор: 
<ѕе1есі пате = "выбор"> 
<орїїіоп уа1ие = "вариант 1">вариант 1</ор1оп> 
<оріїіоп уа1ие = "вариант 2">вариант 2</орііоп> 
<оріїіоп уа1ие = "вариант 3"> вариант 3</орёіоп> 
<оріїіоп уа1ие = "вариант 4" ѕе1есёеӣ>вариант 4</орііоп> 
</ѕе1есі» 
</р> 
Результат: 


выбор: вариант 4 ~ 
вариант 1 
вариант 2 
вариант З 


Таким образом, комбинируя вышеприведенные теги с раз- 
личными атрибутами, можно создать НТМТ-форму любой 
сложности. 


Контрольн ые вопросы 


1. Для чего предназначен язык НТМІ? 

2. Какие принципы, лежащие в основе языка НТМГ, объясняют 
его популярность и распространенность? 

3. Каковы основные соглашения и правила, используемые при 
создании НТМГ-документа? 

4. Как описывается структура НТМГ-документа? 
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5. Какая информация и при помощи каких тегов может содержаться 
в заголовочной части НТМГ-документа? 

6. Какие базовые теги описания тела НТМГ-документа вам извест- 
ны? 

7. Для чего и по каким правилам используются атрибуты тегов? 

8. Для чего создаются НТМГ-формы? 

9. Перечислите основные теги НТМГ-форм с их основными атри- 
бутами. 


Контрольные задания 


1. Создайте НТМГ-документ с именем Первый.Б 1, который содер- 
жит заголовок «Язык НТМІ»; ниже три абзаца, содержащих основные 
сведения о языке НТМЕ, оформленные разными стилями, ниже — 
картинку, соответствующую теме страницы; ниже — три гиперссылки 
на страницы с именами Второй.В 11, Третий. и Четвертый.В 11. 

2. Создайте документ с именем Второй.Б |, содержащий список 
основных тегов языка НТМЕ (список многоуровневый, выделены теги 
заголовка страницы и теги тела страницы). Добавьте на страницу ги- 
перссылки на другие страницы. Добавьте на страницу таблицу стилей, 
которая оформляет созданные списки с использованием различных 
цветов и шрифтов. 

3. Создайте документ с именем Третий.һт и разместите на нем та- 
блицу, поясняющую использование тегов, которые добавлены в версию 
НТМІ. 5. Добавьте на страницу гиперссылки, позволяющие переходить 
на страницы Первый.һті, Второй.һті и Четвертый.Һ. 

4. Создайте документ с именем Четвертый.ћті и разместите на нем 
форму, которая позволит пользователю ввести свое имя, выбрать свой 
город из выпадающего списка и свой пол из двух предложенных вари- 
антов. Оправка данных из формы для будущей обработки выполняется 
кнопкой ѕирті. Создайте в этом документе гиперссылки на остальные 
документы. 
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Тема 3 
КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ 


После изучения данного раздела студент должен: 

знать 

• назначение стилей документов НТМГ, 

• назначение и особенности применения каскадных таблиц стилей, 

• приоритетность селекторов С55, 

• способы применения стилей к отдельным тегам, документам 
и сайтам; 

уметь 

• использовать встроенные, внедренные и внешние таблицы стилей, 

• применять стили к оформлению текста, отдельных элементов 
страницы и блока, 

• применять методы наследования и комбинирования селекторов, 

• применять С$5 для указания формы и расположения блоков до- 
кументов; 

владеть 

• навыками описания стилей для тегов, классов, идентификаторов 
и их комбинаций, 


• эффективного применения селекторов С$5 для создания единого 
стиля сайта. 


3.1. Принцип разделения контента 
и оформления мер-документа 


Как было показано в предыдущем разделе, можно довольно 
успешно реализовывать меЬ-страницы и међ-сайты в целом, 
используя только возможности НТМІ.. Однако, чем больше ста- 
новится сайт, тем больше требуется времени и других сетевых 
ресурсов для загрузки страниц. Разработчикам следует поза- 
ботиться о том, чтобы не загружать информацию об оформ- 
лении и компоновке страниц в каждом файле НТМГ. Вместо 
этого можно (и нужно) создавать простые файлы НТМІ, ко- 
торые включают только содержимое страниц, а информацию 
об оформлении и компоновке размещать один раз, в отдельном 
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файле, содержащем только наборы стилей. При этом ссылки 
на файл, в котором хранятся эти стили, помещаются в каждый 
НТМГ-документ. Это обеспечивает также легкость поддержки 
сайта: если потребуется изменить внешний вид сайта, обнов- 
ления нужно сделать только в одном месте. 

Такой подход упрощает и совместимость с различными 
устройствами: Если страница не содержит информации о сти- 
лях оформления, ее можно переформатировать для разных 
устройств с совершенно разными атрибутами (например, раз- 
мером экрана), применяя просто альтернативную таблицу сти- 
лей. Разделение контента (содержимого) и оформления также 
позволяет определить разные стили для разных методов пред- 
ставления (например, просмотра на экране или печати). 

Разграничение содержимого и оформления меЬ-страницы 
улучшает также продвижение сайта в поисковых системах, ко- 
торые используют специальные «программы-роботы», считы- 
вающие содержимое страниц на сайтах и индексирующие их. 
Если эта программа не сможет прочитать содержимое страни- 
цы, перегруженной стилевой информацией, или неправильно 
интерпретирует важные вещи, то вероятность того, что в ре- 
зультатах поиска страница окажется на верхних позициях, су- 
щественно уменьшится. 


3.2. Основы (5$ 


Каскадные таблицы стилей (Саѕсайіпе 5 Ѕ$һееіѕ, С55) — 
это формальный язык описания внешнего вида документа, соз- 
данного с использованием языка разметки НТМГ. 

Мы уже встречались с описанием стилей отдельных те- 
гов или блоков в предыдущем разделе, и при этом речь шла 
о встроенных С55, если они указаны прямо как атрибуты 
тегов, или о внедренных, если стили собраны внутри блока 
<$е>...</е> в области заголовка НТМІ-документа. 

Для подключения внешней (связанной) таблицы стилей 
к документу в области заголовка страницы используется тег 
<ПоК>: 


<!БОСТУРЕ һЕт1> 
<Пеаа> 


<Ііпк пге+ = "тузу1е.с$5" ге1 = "ѕ+уІеѕһее" Фуре = "Фехі/сѕ55"> 
</һеаа> 
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<Боау> 
<р>в этом абзаце текст должен быть зеленым, окруженным красной 
рамкой</р> 
</Боду> 
</ҺЕм1> 


Следующая таблица стилей С$5 (хранящаяся, например, 
в файле туѕѓуїе.сѕѕ в той же папке, что и НТМІ -документ) уста- 
навливает цвет текста всех абзацев зеленым и окружит его 
сплошной красной рамкой: 


р { 
со1ог : вгееп; 
Богаег: $0114 геа; 


Термин «каскадные» в отношении таблиц стилей указывает 
на то, что НТМІ -документ может использовать несколько сти- 
лей, которые имеют разные уровни приоритета. Браузер, пред- 
ставляя документ пользователю, следует их порядку (как ка- 
скаду), последовательно интерпретируя информацию стилей, 
имеющих разные приоритеты. 

Сначала будут проверены и применены стили внешнего 
С55-файла, но если позже будут найдены соответствующие 
встроенные стили, то стиль соответствующих элементов будет 
переопределен, а, если, еще позже, найдется стиль прямо вне- 
дренный в тег, то в результате «сработает» именно он. 

Итак, в С55 работают следующие правила приоритетов: 

— самый низкий приоритет имеют стили браузера по умол- 
чанию; 

— затем те, что лежат во внешнем подключенном файле; 

— затем те, что встроили внутрь НТМГ-документа с помо- 
щью тега <5е>; 

— затем те, которые указаны внутри тегов, как их атрибуты; 

— самый высокий приоритет у правил с меткой «!ітрогѓапё»; 

— при равенстве приоритетов будут применены те стили, 
которые объявлены последними. 

Внутри одной таблицы С$5 (внешней или встроенной) су- 
ществует три основных способа использования С$8: 

— применение стиля к тегу; 

— применение стиля к некоторому 1р (идентификатору эле- 
мента); 

— применение стиля к классу элемента. 
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Применение стиля к тегу. Если требуется, чтобы все абза- 
цы были записаны через две строки и зеленым цветом, в С55 
можно добавить следующее объявление: 


р { 
1іпе-һеіеһё: 2епт; 
со1ог: вгееп; 


Теперь любой контент, заключенный в теги <р>, будет за- 
писываться через две строки зеленым цветом. 

Переопределение Ір. Для любого тега можно указать иден- 
тификатор — атрибут 14. Каждый ій может использоваться 
на странице только один раз, то есть он указывает на неко- 
торый уникальный блок или тег, который должен иметь уни- 
кальный (отличный от всех других элементов на этой страни- 
це) стиль. В таблице стилей перед Ір обязательно указывается 
знак #. 

Например, если вы хотите, чтобы только один абзац текста 
выводился через два интервала и зеленым цветом, задайте для 
него 1р: 


<р іа = "іа1"> 
Контент абзаца 
</р> 


И затем примените к нему правило С55 следующим обра- 
зом: 


#141 { 
11пе-Не1ей*: 2ет; 
со1ог: 5гееп; 


Переопределение класса. Классы похожи на 1р, за исклю- 
чением того, что на каждой странице можно иметь несколько 
элементов одного класса. Перед именем класса в таблице сти- 
лей обязательно используется символ точка (.). 

Если требуется использовать двойной интервал и выделение 
цветом для двух первых абзацев на странице, то можно будет 
добавить к ним классы следующим образом: 


<р с1аѕ5 = "1а1">Контент первого абзаца </р> 
<р с1аѕѕ "1а1">Контент второго абзаца </р> 
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И затем применим к ним правило С55 следующим образом: 


.141 { 
1іпе-һеіеһё: 2ет; 
со1ог: ргееп; 


Описание идентификатора имеет более высокий приоритет 
по сравнению с описанием класса, приоритет которого, в свою 
очередь, выше, чем у описания обычного тега. Здесь абзац 
с идентификатором «ѓоод» появится на зеленом фоне. 


<р іа = "Ғооа" >»... </р» 


#Рооа { 
баскегоипа: вгееп; 


} 
р { 


баскегоипа: огапеве; 


} 


В Интернете существует множество источников с удобно 
структурированной информацией о С$5, которые позволят бы- 
стро получить сведения о том, как изменять оформление эле- 
ментов документа!. Однако, на наш взгляд, стоит более подроб- 
но изложить материал о том, как с использованием С55 можно 
влиять на структуру страниц. 


3.3. Особенности применения (5$ 
для указания формы и расположения блоков 


В отличии от строгих привязок стандартных НТМІ-тегов 
к своему содержимому (например, тег <р> — абзац, <а> — 
ссылка), тег <Яіу> является нейтральным. То есть в нем мо- 
жет содержаться разная информация: абзацы, ссылки, картин- 
ки, таблицы и т. д. Это тег позволяет описывать определенную 
функциональную область страницы (область заголовка, об- 
ласть меню, область основного контента), или внутри этих 
крупных функциональных блоков описывать «подблоки», на- 
пример, рекламный блок в области заголовка. 


1 См. напр.: Һрѕ:/ /угугуг.№3.019/5(у1е/С55/ 
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Разделение содержимого страницы на блоки позволяет 
более эффективно управлять его размещением на странице 
за счет указания стилей каждого блока в каскадных таблицах 
стилей. 

Для начала рассмотрим основные описания С$$, которые 
касаются формы блока <Яіу>. Следует отметить, что все эти 
стили можно отнести ко многим другим элементам (картин- 
кам, абзацам и т. п.). 

На рис. 3.1 представлены основные свойства, задающие 
форму блока. 
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Рис. 3.1. Основные свойства ($$, задающие форму блока 


Свойство тагеіп устанавливает величину отступа от каж- 
дого края элемента. Отступом является пространство от грани- 
цы этого элемента до внутренней границы его родительского 
элемента: 


„.е1етеп{ { 
тагвіп: 1Өрх 20рх З@рх 7@рх; 
} 


Для любого элемента, который описан с использованием 
атрибута с1аѕ5 = "еіетепі", будут выполнены отступы от края 
экрана (или края родительского для него элемента): сверху — 
10 пикселей, справа — 20, снизу — 30 и слева — 70 пикселей 
(от верхнего края по часовой стрелке). Если указан только 
один параметр, то будет одинаковый отступ со всех четырех 
сторон. Если указаны только два параметра, то первый из них 
показывает величину отступа сверху и снизу, а второй — слева 
и справа. 


43 


Тодт: @й Ббооокѕ 


Можно указать также конкретный параметр, например, 
таг51п-Фор: 40рх; 
Можно указать также: 


.е1етепё { 
пагріп: аи+о; 


} 


Тогда элемент будет отцентрирован по горизонтали относи- 
тельно родительского блока. 

Свойство рап задает величину отступа от границы блока 
до его содержимого. Используется аналогично свойству тагріп. 

Свойство Богаег задает параметры рамки блока. 

Примеры: 


„.е1етепт* { 
Богаег-со1ог: ге ргееп Б1ие огапёе; 
Богаег-$+у1е: $0114; 


} 


Рамка будет сплошной линией разного цвета со всех четы- 
рех сторон. 


.е1етеп{ { 
Богаег: 2рх $0114 #е9385а; 
рогаег-гаӣіиѕ: 5рх; 


} 


Рамка будет с закругленными углами, толщиной 2 пикселя. 

Далее рассмотрим свойства, отвечающие за расположение 
блоков друг относительно друга. 

Свойство 5р1ау. Элементы НТМІ. делятся на две основные 
категории: блочные и встроенные элементы. Блочные элемен- 
ты (<аіу>, <р>, <һ1> ит. д.) всегда занимают все возможное 
пространство по горизонтали и начинаются с новой строки. 
Встроенные элементы (<іте>, <а> ит. д.) занимают только 
необходимое пространство. Им не нужно начинаться с новой 
строки. Свойство аіѕрІау позволяет указать, какой из этих ти- 
пов должен применяться к описываемому элементу. Примеры: 


„.е1етепе { 
аіѕр1ау: іп1іпе; 


} 
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Все элементы класса еіетепї (если их несколько подряд) бу- 
дут расположены в одну строку. 


.е1етепё { 
91$р1ау: БЬ1оск; 
} 


Каждый элемент класса ејетепі займет все возможное го- 
ризонтальное пространство, каждый будет выводиться с новой 
строки. 


.е1етеп& { 
Я15р1ау: іп1іпе-Ь1оск; 
} 


Все элементы этого класса будут выстроены в строку, но при 
изменении размера экрана или изменении значений других 
атрибутов элемента, будут перестраиваться, например, пере- 
ходить в следующую строку. 

Свойство ЛоаЕ. Позволяет указать как другие элементы 
должны «обтекать» данный элемент, например: 


.еїетепї { 
Поа: Іеғі; 


} 
.оёһег-Бох { 


с1еаг: Л1еті; 


} 


Все элементы класса ејетепі будут прижиматься влево, 
а следующие за ними элементы будут обтекать их справа. Од- 
нако, если встретится элемент класса оег-Бох, он начнет вы- 
водится с новой строки, так как свойство сІеаг: 1еЁ «обнуляет» 
предыдущие Ноа+. 

То есть становится понятно, что современный подход к опи- 
санию уғеБ-страниц состоит в том, чтобы в теле документа 
(Бойу) описывать только содержательные блоки. А то, как они 
будут размещены в окне браузера, каким цветом, размером 
и выравниванием будут оформлены — задается с использо- 
ванием стилей. Современный стандарт разделения содержи- 
мого и оформления документа предполагает, что необходимо 
вынесение стилей в отдельный документ с расширением с$$ 
и его подключение к НТМІ-странице с использованием тега 
<Пик...> 


45 


Тодт: @й Ббооокѕ 


Ниже представлен пример форматирования страницы с ис- 
пользованием внешней таблицы стилей. 
Файл 1.6911: 


<!ООСТУРЕ Нт1> 
<!- Заголовок документа --> 
<Веаа> 
<!- Подключение внешней таблицы стилей --> 
<1іпк Иге+ = "$%у1е.с$$" ге1 = "ѕ1їу1еѕһееї" фуре = "Фехі/сѕ55">› 


</һеаа» 
<!-- Начало тела документа --> 
<Боау> 
<!-- Начало блока содержимого документа --> 
<А1у с1аѕ5 = "сопЁаіпег" > 
<!-- Начало блока заголовка --> 
<һеаег> 
<ћ1>Заголовок страницы</һ1> 
</һеайег> 


<!-- Начало блока меню --> 
<пау> 
<ћ1>Меню</һ1> 
<!-- Начало списка пунктов меню --> 
<и1> 
<11>‹а Пге+ = "#">Выбор 1</а></11> 
<Іі»<а Нгеф = "#">Выбор 2</а></11> 
<11>‹а Пге+ = "#">Выбор 3</а></11> 
<!-- Конец списка пунктов меню --> 
</и1> 
<1-- Конец блока меню --> 
</пам> 


<!-- Начало блока статей --> 


<агёіс1е» 
<ћ1>Статья</һ1> 
<р>Здесь может быть текст статьи: 
<1-- Вставка картинки --> 
<іте 5с = "1.јре" $у1е = "Һеівһі: 50рх;"> 
</р> 
<!-- Конец блока статей --> 
</аг+1с1е> 


<!-- Начало блока подвала --> 
<Ғоо+ег> 
Это "подвал" страницы 
<!-- Конец блока подвала --> 
</ Ғоо+ег> 
<!-- Конец блока документа- - > 
</аіу> 
</боау> 
</ћЕт1> 
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Файл ѕгуІе.с5: 


/*-- стиль для блока іу с идентификатором сопёаіпег, ширина - 
73% от ширины экрана, рамка отсутствует, за счет отступа (тағдіп 
аифо) - Выравнивание блока по центру --*/ 
аіу#сопёаіпег { 

міаһ: 73%; 

Богаег: попе; 

таг51п: аиќ+о; 


} 


/*-- стиль для һеайег и фоофег - заголовок и подвал страницы. 
Отступ текста от края блока - 1ет (текущий размер шрифта, для 
увеличения или уменьшения, можно брать любые пропорции от теку- 
щего: 2ет, 0.5ет); сЁеаг: (ефЕЁ - отменяет обтекание с левого края 
элемента, все другие элементы на этой стороне будут располагаться 
под текущим элементом --*/ 
һеадег { 

райаіпв: 1ет; 

со1ог: мһіќ+е; 

баскегоипа-со1ог: #007196; 

с1еаг: Іе#і; 

+ехі-а1ірп: сеп+ег; 


} 


Ғоо+ег { 
роѕіїіоп: ађбѕо1и+е; 
Іе+ғі: ө; 
гівһі: 0; 
роот: Ө; 
һеірһё: 50рх; 
со1ог:мһі+е; 
браскегоипа-со1ог: #007196; 
{ехЕ-а11вп: сепїег; 


} 


/*-- для блока меню (пау) ћоаё:гідһЕ - прижимает к правому краю, 
остальные элементы обтекают его по левой стороне --*/ 
пау { 

Поа: гірһ+; 

тах-міаёһ: 160рх; 

һеірһё: 164рх; 

райаіпв: 1ет; 

Богаег: $0114 #333 


т 
/*-- стиль только для маркированного списка внутри блока пам, 
115+-5+уІе-+уре: попе - задает отсутствие маркеров --*/ 
пам и1 { 
1151-51у1е-+уре: попе; 
райдіпе: 9; 
} 
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/*-- стиль только для гиперссылок внутри элементов списка внутри 
блока пау. Стиль ссылок задается по умолчанию --*/ 
пау и1 а { 

Техі-десогаіоп: попе; 


} 


/*-- стиль блока статей --*/ 
агЕ1с1е { 

райдіпе: 1ет; 
} 


При просмотре файла 1.Б ит] браузером вы сможете увидеть 
результат, показанный на рис. 3.2. 








Заголовок ст раницы 







Статья Меню 


Выбор 1 


57 Выбор 2 


Здесь мокет быть текст статьи: Выбор 3 


Рис. 3.2. Результат просмотра документа в браузере 


Контрольные вопросы 


1. Для чего применяется технология С55? 

2. Почему используется термин «Каскадные» при определении 
таблиц стилей? 

3. К каким элементам могут быть привязаны стили? 

4. Какие правила приоритетности в применении С$5 вам известны? 

5. Какие свойства используются для указания формы и оформления 
блоков? 


Контрольные задания 


1. Создайте страницу с тремя блоками (теги іу) содержащими 
различные абзацы текста. Сохраните файл с именем Блоки.В 11. 

2. Создайте файл с именем 51у[е.с$$, который позволяет оформить 
все абзацы текста следующим образом. Цвет шрифта — красный, цвет 
фона — голубой, рамка — черная, толщиной 3 рх, расстояние от текста 
абзаца до границы родительского блока — 10 рх со всех сторон. Под- 
ключите эту таблицу стилей к файлу Блоки.Бит1. 

3. Измените таблицу стилей так, чтобы один из абзацев был оформ- 
лен другим стилем (используйте 14 для тега р). 
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4. Измените таблицу стилей так, чтобы остальные два из трех 
абзацев были оформлены другим стилем (используйте с1аз$ для двух 
тегов р). 

5. Измените таблицу стилей так, чтобы абзацы выводились по два 
вряд (первый и второй на одном уровне, третий — ниже). Используйте 
стили обтекания для тегов аіу. 
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Тема 4 
ТЕХНОЛОГИИ АДАПТИВНОЙ 
ВЕРСТКИ САЙТОВ 


После изучения данного раздела студент должен: 

знать 

• сущность проблемы адаптивной верстки, 

• основные виды устройств для просмотра интернет-контента, 

• существующие подходы к решению проблемы адаптивности сай- 


• понятие С55-фреймворков, 

• основные возможности фреймворка Вооѓѕітар, 

• назначение технологий сетки и ВехБох, особенности их приме- 
нения; 

уметь 

• применять возможности С55-фреймворка при создании адаптив- 
ных сайтов, 

• использовать и настраивать готовые компоненты библиотеки, 

• описывать структуру страницы с примененим средств фреймворка; 

владеть 

• навыками подключения фреймворка, 

• использования готовых шаблонов и компонентов фреймворка 
для оптимизации процесса верстки сайта, 

• переопределения встроенных стилей компонентов фреймворка, 

• расположения блоков страницы с применением технологии Са 
и Нехрох. 


4.1. Понятие и назначение адаптивной верстки 


Верстка веб-страниц — это создание структуры гипертек- 
стового документа на основе НТМІ -разметки с использовани- 
ем таблиц стилей и клиентских сценариев, таким образом, что- 
бы элементы дизайна выглядели аналогично макету, который 
разработал мер-дизайнер. 
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Адаптивная верстка — это подход, предполагающий из- 
менение дизайна в зависимости от поведения пользователя, 
размера экрана, платформы и ориентации устройства. Други- 
ми словами, страница должна автоматически подстраиваться 
под разрешение экрана, изменять расположение блоков, раз- 
мер картинок и т. д. Можно разбить устройства на разные ка- 
тегории и верстать для каждой из них отдельно, но это займет 
слишком много времени, особенно учитывая, что в настоя- 
щее время существует целых спектр разнообразных устройств 
(табл. 4.1). 





Таблица 4.1 
Основные размеры экранов современных компьютеров 
Устройство Диагональ Разрешение 
(в дюймах) (в пикселях) 
Смартфоны 240х320 - 2560х1440 





Электронные книги 600х800 - 758х1024 


6—8 


Ноутбуки 10,1—18,4 1280х800 - 3840х 2160 
Настольные компьютеры 15—55 1024х768 - 3840х 2160 











В соответствии с современными стандартами, предлагается 
устанавливать 4 варианта отображения страниц на дисплеях 
в зависимости от количества экранных пикселей по горизон- 
тали: 

— х5 (ехіта зтай аӢеуісеѕ) — менее 768 пикселей (для смарт- 
фонов); 

— т (5та[П аеуісеѕ) — от 768 до 991 пикселей (для планше- 
тов); 

— та (теёит аӢеуісеѕ) — от 992 до 1199 пикселей (для но- 
утбуков); 

— 14 (Іагое аеусе$) — от 1200 пикселей (для десктопов). 

Учитывая распространение в последние годы смарт-часов 
и инфо-браслетов, необходимо выделять еще один экранный 
класс устройств с разрешением дисплеев от 240 до 320 пикселей. 

Чтобы сайт корректно отображался на устройствах с экра- 
нами разных размеров и ориентаций, были разработаны сле- 
дующие технологии. 

Простейший способ — это задавать относительный (в про- 
центах) размер картинок и других элементов страницы. 
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Пример 
Пусть имеется такое описание некоторой галереи изображений 
на языке НТМГ. 


<аіу с1аѕ5 = "ітаре ра11егу"> 
<аіу> 
<іме ѕгс 
</аім> 
<аіу> 
<іте 5гс 
</аіу> 
<аіу> 
<ітЕ 5с 
</аіу> 
</аіу> 


"Лето" /> 


"../1таве$/1.]рё" і+1е 


"Зима" /> 


"../ітавеѕ/2.јрв" 11е 


"../імареѕ/3.јрв" +141е "Осень" /> 


То есть мы добавили несколько изображений и поместили все 
в один іу класса ітаве ваПегу. 
Теперь рассмотрим фрагмент таблицы стилей для этой галереи. 


аіу.ітаре ра11егу { 
таг51п: 9 аи+о; 
міаєһ: 1000рх; 
{ехЕ-а115п: сепїег; 
тах-міаёһ: 90%; /*-- контейнер не превышает 90% ширины экрана */ 
піп-міаёһ: 500рх; 
} 
іте { 
Поа: Іе++; 
тах-міаёһ: 30%; /*-- каждое изображение не превышает 30% ширины 
галереи */ 
Ве1ёН{: аи+о; 
раааіпе: 2%; /*-- небольшие отступы для изображений --*/ 


| 


Каждое изображение в галерее теперь будет изменять свой 
размер в зависимости от изменения размеров контейнера. 

Более сложный способ — чтобы не растягивать и не сужать 
картинку, ее заменяют ее урезанным фрагментом. Но для того, 
чтобы переход к этому фрагменту выглядел плавным, основная 
картинка «подкладывается» как фон в некоторый блок. 

Еще одна техника — для маленьких экранов использовать 
не просто небольшое изображение, но и с меньшим разреше- 
нием. Подготавливаются две картинки и указывается тег: 


<іте 5гс = "5та11Ве5.]рё" аата-Ғи115гс = "1агреКеѕ.јрв"> 
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Если же говорить о современных технологиях адаптивной 
верстки в целом, то существуют два основных направления. 

Первое из них состоит в использовании сетки (Ста), ко- 
торая позволяет условно разделять горизонтальное простран- 
ство экрана на определенное количество колонок (обычно 12), 
а затем, «вписывать» блоки в эти колонки, при необходимости 
объединяя их. При этом, если страница имеет более сложную 
структуру, в которой требуется не только горизонтальное, 
но и вертикальное выравнивание блоков, приходится исполь- 
зовать дополнительные, не всегда простые методы С55. 

Второе направление предлагает использовать специфика- 
цию С$5 ЕІехіЫе Вох Іауоиё Мойше. Основное преимущество 
этой технологии верстки состоит в том, что все блоки очень 
легко делаются «резиновым», что уже следует из названия 
«Пех». Элементы могут сжиматься и растягиваться по задан- 
ным правилам, занимая нужное пространство не только по го- 
ризонтали, но и по вертикали страницы. 

Подробнее применение каждой из этих технологий поясня- 
ется в практической части курса. 


4.2. С55-фреймворки 


Фреймворк (термин происходит от јгатеиогк — остов, кар- 
кас, структура) — класс программного обеспечения, опреде- 
ляющего структуру разрабатываемой программной системы, 
облегчающего разработку и объединение разных компонентов 
большого программного проекта. 

Часто понятие фреймворк употребляют как синоним слова 
библиотека подпрограмм. Однако это более широкое понятие. 
В отличие от библиотек, фреймворки не просто предоставляют 
разработчику фрагменты готовых отлаженных функциональ- 
ных модулей, но и влияют на структуру проекта, определяют 
способ взаимодействия его составных частей. 

С55-фреймворк — это с одной стороны, набор готовых функ- 
циональных блоков, которые объединяют НТМІ.-код и соответ- 
ствующую таблицу стилей, а с другой — некоторая идеология 
верстки. С55-фреймворки созданы для упрощения работы вер- 
стальщика, быстроты разработки и исключения максимально 
возможного числа ошибок верстки, например, проблем совме- 
стимости различных версий браузеров и т. д. 
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При использовании фреймворков С55-библиотеки, обычно 
имеющие вид внешнего С55-файла, «подключаются» к проекту 
(добавляются в заголовок М’еБ-страницы). 

В настоящее время используется множество С55-фрейм- 
ворков, в том числе Зетапис ОТ, Еоипаабйоп, Зсе|етоп, но одним 
из наиболее распространенных С55-фреймворков сейчас явля- 
ется Воо($ гар, который и будет рассмотрен ниже. 


4.3. Использование Вооќїгар 


Комплект всех необходимых модулей фреймворка Вооѓѕігар 
можно скачать с сайта ВИрз: / /веооѓѕігар.сот/. Установив 
фреймворк в текущий проект, можно далее продолжать разра- 
ботку локально. Можно также подключить библиотеку по так 
называемому СОМ (сети доставки и дистрибьюции контента) 
и подгружать нужные функции по мере необходимости. 

При скачивании Вооѓѕігар вы обратите внимание на то, что 
создается не только папка с С55-файлами стилей, но и папка 
Ј8-скриптов. Это объясняется тем, что многие из компонентов 
требуют использования программного кода на языке ЈауаЅсгірг, 
поэтому часто Воо{$тар называют С5$ и Ј5-фреймворком. Под- 
робнее о назначении и использовании ЈауаЅсгірі мы погово- 
рим в следующем разделе. 

На следующем шаге рекомендуется скачать с сайта базовый 
шаблон страницы, который уже содержит все необходимые 
строки подключения библиотек. 

Далее с этого же сайта скачиваются нужные на страни- 
це компоненты: меню, списки, компоненты поиска, линейки 
прокрутки, элементы формы и т. д. Каждый из них представ- 
ляет собой блок <аіу>, который описан на языке НТМІ. и име- 
ет в подключенной библиотеке уже готовый набор стилей 
(и ЈауаЅсгірі-функций). Разработчику нужно только поместить 
скачанный НТМГ-код этого элемента в нужное место страницы 
и подправить стиль (через его переопределение в собственной 
таблице стилей), если это требуется в соответствии с дизайном 
сайта. 

При этом проблем остается только две: 

2) как поместить элемент именно в нужное место страницы; 

3) что должно происходить с элементами страницы, если 
размер экрана будет изменен. 
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Решить первую проблему позволяют технологии сетки 
(СА) или ЕІехБох, а вторая проблема решается в Вооѓѕігар че- 
рез так называемые медиазапросы. Рассмотрим эти технологии 
более подробно. 

Сетка (Стіа $уѕіет) Вооіѕігар позволяет горизонтально 
разделить страницу на 12 столбцов. Если использовать все 
12 частей нет необходимости, такие блоки можно легко груп- 
пировать, создавая более широкие столбцы. Они будут состо- 
ять из двух, трех и так далее частей страницы, условно раз- 
деленной на 12 частей. Это около 8,3 % ширины всего экрана 
на столбец. Таким способом можно разделить не только стра- 
ницу, но и любой блочный элемент, размеры подблоков будут 
рассчитаны как часть родительского элемента. 

В Стіа-верстке Вооїѓѕігар есть уже упомянутые выше четы- 
ре основных класса устройств: х$, ѕт, та и 19. Удобство сетки 
состоит в том, что эти классы можно комбинировать, чтобы 
создавать адаптивную верстку и точно знать, как макет будет 
отображаться при том или ином размере экрана. 

Базовая структура макета сетки в Вооѓѕігар выглядит так: 


<!-- Выделяется первый горизонтальный блок --> 

<аіу с1аѕ5 = "гом" > 

<!-- Внутри него выделяется Вертикальный блок --> 
<аіу с1аѕ5 = "со1-*"></а1\> 

</аіу> 


<1-- Выделяется второй горизонтальный блок --> 
<аіу с1а$$ = "гом"> 
<!-- Внутри него Выделяются три вертикальных блока --> 
<аіу с1аѕ5 = "со1-*"></а1\> 
<аіу с1а$$5 "со1-%*"></аіу> 
<аіу с1аѕ5 "со1-%*"></аіу> 
</аіу> 


<аіу с1аѕ5 = "гом" > 

</аім> 

На основе базового макета создается любой другой. Опи- 
сывается строка с ячейками: < іу с1а55 = "тоу"> и в нее до- 
бавляется нужное количество столбцов с соответствующими 
классами .со]-*. 

Обратите внимание, что сумма ячеек для каждого типа (5, 


х5, та, 19) в ячейке .со|-* не должна превышать 12 частей для 
каждой строки. 
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Следующий пример показывает, как сверстать три равных 
по ширине колонки, которые будут отображаться горизонталь- 
но на планшетах и более крупных экранах. На экране мобиль- 
ного такая верстка будет растянута и каждая из ячеек займет 
всю ширину экрана (если ширина всех колонок одинакова, ко- 
личество частей в колонке можно не указывать): 


<аіу с1а$$ = "гом" > 
<аіу с1аѕ5ѕ = "со1"> Содержимое первой колонки</41\> 
<аіу с1аѕ5 = "со1"> Содержимое второй колонки </41\> 


<аіу с1аѕ5 
</аім> 


"со1"> Содержимое третьей колонки </іу> 


В следующем примере страница делится на две колонки 
разной ширины, которые будут отображаться горизонтально 
на любых устройствах, кроме мобильных телефонов: 


<аіу с1аѕ5 = "гом" > 
<аіу с1аѕ5 = "со1-4"> Содержимое первой колонки </491\> 
<аіу с1аѕ5 = "со1-8"> Содержимое второй колонки </а1\> 
</аіу> 


Еще один пример: две колонки с двумя вложенными колон- 
ками. В этом случае страница будет разделена на две разные 
колонки на планшетах и больших экранах, а большая колон- 
ка в свою очередь будет разделена на две равные колонки. 
На экранах мобильных телефонов эти колонки будут растяги- 
ваться на всю ширину экрана. 


<аіу с1аѕ5 = "гом" > 
<аіу с1аѕ5 = "со1-8"> Содержимое первой колонки 
<аіу с1аѕ5 = "гом" > 
<аіу с1аѕ55 = "со1-6"> Содержимое первой встроенной колонки 
</аіу> 
<аіу с1а55 = "со1-6"> Содержимое второй встроенной колонки 
</аім> 
</аім> 
</аіу> 
<аіу с1аѕ5 = "со1-4"> Содержимое второй колонки </491\> 
</аіу> 


Таким образом легко можно контролировать, как отобра- 
жать ячейки из шаблона, а верстка становится мобильной без 
дополнительных усилий. 

Однако для того, чтобы контролировать размещение блоков 
также по вертикали, используется так называемая решетка, 
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которая реализована только в версии Вооѓѕігар 4 с помощью 
технологии ЕІехђох. 

Рассмотрим пример галереи на ЕехБох!. Пусть необходимо 
вывести 10 изображений. Такой блок на НТМІ. можно описать 
следующим образом: 


<та1п с1аѕ5 = "ра11егу"> 
<іте 5гс = "/іте1.јре"> 
<іте $гс = "/іте2.јре"> 
<іте 5гс = "/ітез.јре"> 
<іте 5гс = "/іте4.јре"> 
<іте 5гс = "/іте5.јре"> 
<іте 5гс = "/ітеб.јре"> 
<ітЕ ѕгс = "/іте7.јрв"> 
<ітЕ ѕгс = "/іте8.јре"> 
<іте ѕгс = "/іте9.јрв"> 
<іте ѕгс = "/11510.]рё"> 

</та1п> 


В этом случае С$5 с Нехрох позволяет сделать следующее: 


5а11егу { 
/* Галерея займет все свободное пространство экрана */ 
т1и-БезёНе: 100уһ; 


/* Все изображения уменьшатся, чтобы уместиться в одну линию */ 
915р1ау: Чех; 


/* Разрешить переносить не поместившиеся элементы на следующую 
строку */ 
Яех-мгар: мгар; 


/* Сохранять исходный размер изображений */ 
а1ірп-ібетѕ: Яех-$%аг\; 


/* Разместить блоки по центру по горизонтали */ 
јчѕ&1і+у-сопёепі : сепёег; 


/* Разместить блоки по центру по вертикали */ 
а11 вп : сепфег; 


Очевидно, что подобные, и гораздо более сложные настрой- 
ки можно выполнять с использованием свойств Еехрох над лю- 
быми блокамиг2. 


1 Бирз://Кеупй кеЙ.га/ 
2 Подробнее см.: Һр: / /ргоғег.ги/ігапѕ1айопѕ/Һом-сѕѕ-ПехБох-могКѕ/ 


57 


Тодт: @й Ббооокѕ 


4.4. Использование медиазапросов 


Медиазапросы позволяют выполнять определенные дей- 
ствия со страницей при изменении ее размера. 
Пример медиа-запроса: 


@тед1а зсгееп апа (тах-міаєһ: 768рх) 
{ 
Боау { 
Фоп*-$17е: 9р+; 
} 
} 


Данный код означает следующее: «Если ширина окна брау- 
зера станет меньше 768 рх, то применить стили, указанные 
в фигурных скобках». 

Пусть имеется следующий НТМГ-документ: 


<!БОСТУРЕ ҺЕм1> 
<һеаа» 
<6161е>Медиа-запросы</&1+1е»> 
<ѕїу1е»> 
роду { 
Ғопё-ѕ1іле: 15р+; 
} 
@те1а ѕсгееп апа (тах-м1аЕИ: 768рх) { 
Боау { 
Ғопё-ѕіғе: 9р+; 
} 
} 
</5ѕ+у1е»> 
</Неаа> 
<Боду> 
<р>Текст</р> 
</Боау> 
</ћЕт1> 


Если открыть эту страницу в браузере и начать уменьшать 
его размер, при достижении размера 768 пикселей текст умень- 
шится до 9 ре. 

В медиазапросах могут указываться и другие параметры, 
такие как тіп-уіағѓћ, тах-һеіғһг и тіп-һеіеһ, которые будут 
срабатывать при указанной ширине и высоте. Также можно 
комбинировать разные параметры через апа: 


@тед1а ѕсгееп апа (тах-міаёһ: 768рх) апа (тах-һеівһе: 300рх) { 
роау { 


58 


Тодт: @й Ббооокѕ 


Ғопё-ѕіғе: 9р+; 
} 
} 


В данном случае стили будут подключаться только при ши- 
рине, меньшей либо равной 768 рх, и при высоте, меньшей ли- 
бо равной 300 рх. 


Контрольные вопросы 


1. Определите понятия «верстка» и «адаптивная верстка» мер- 
страниц. 

2. Какие подходы, используемые при адаптивной верстке, вам из- 
вестны? 

3. Чтотакое фреймворк? Чем фреймворки отличаются от библиотек 
подпрограмм? 

4. Что такое С55-фреймворк? Какие С55-фреймворки вам извест- 
ны? 

5. Каковы основные возможности Вооѓѕїгар? 

6. Как верстается страница при применении Вооѓѕігар? 

7. Поясните основные принципы использования бгіа Зузет 
в Вооѓѕітар. 

8. Для чего используются медиазапросы? 


Контрольные задания 


1. Создайте две страницы НТМІ. на основе базового документа 
(Ѕсаггег {етра{е) с сайта Бооѓѕітар БЕрз: / /се ос гар.сот/40с$/4.5/ 
сесіпе-ѕгагѓеа /іпігоаиспоп/ 

2. Проверьте подключение Вооѓѕітар по технологии СОМ. Вы долж- 
ны увидеть сообщение НеПо М/о! при запуске каждой из страниц. 

3. Разместите внутри области Бойу каждой из страниц сетку 
Вооѓѕітар, содержащую одну строку, внутри которой две колонки. 
Первая колонка занимает одну треть экрана, вторая — две трети. 

4. Разместите на обеих страницах в более узкой колонке компонент 
вертикального меню, скачанный со страницы ВИ рз://зе оо! тар.сот/ 
10с5/4.4/сотропепіѕ /пауѕ/. Настройте меню так, чтобы оно позволяло 
переключаться между двумя этими страницами. 

5. Поместите в более широкую колонку каждой из страниц два 
разных компонента Вооѓѕігар, позволяющие продемонстрировать воз- 
можности фреймворка. 
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Тема 5 
ОСНОВЫ ПРИМЕНЕНИЯ ЈАМАЅСКІРТ 


После изучения данного раздела студент должен: 

знать 

• особенности клиент-серверного взаимодействия на основе про- 
токола НТТР, 

• возможности клиентской обработки мер-страниц, 

• назначение, возможности и ограничения языка ЈауаЅсгірі, его 
библиотек и фреймворков, 

• основы создания и отладки программного кода на языке ЈауаЅсгірг, 

• возможности и преимущества иегу и Кеасї; 

уметь 

• создавать клиентские сценарии для обработки меБ-страниц с при- 
менением «чистого» ЈауаЅсгірі, а также с применением современных 
Јауа$стірг библиотек и фреймворков; 

владеть 

• навыками создания и отладки программного кода на языке 
Јауа$сгірғ, 

• структурирования кода и применения функций, 

• подключения библиотек и фреймворкаов, 

• использования готовых шаблонов и компонентов фреймворков 
для оптимизации разработки клиентских скриптов. 


5.1. Назначение и возможности 
скриптовых языков программирования 


Как вам уже известно, в системе У/М/М клиент-браузер по- 
сылает НТТР-запросы некоторой программе, расположенной 
на удаленном компьютере в сети Интернет, которая выполня- 
ет функции сервера, обрабатывает запрос и отправляет обрат- 
но клиенту ответ в виде, как правило, НТМІ -страницы. Таким 
образом, в основе работы међЬ-приложения лежит так называ- 
емая модель взаимодействия клиент-сервер, которая позво- 
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ляет разделять функциональность и вычислительную нагрузку 
между клиентскими приложениями (заказчиками услуг) и сер- 
верными приложениями (поставщиками услуг). 

Результатом работы м’еЬ-приложения является м’ер-стра- 
ница, отображаемая в окне браузера. При ее формировании, 
в рамках клиент-серверной модели взаимодействия, функции 
уер-приложения могут выполняться как на компьютере клиен- 
та, так и на компьютере сервера. 

Одним из типов приложений, предназначенных для вы- 
полнения на стороне клиента, являются сценарии, написан- 
ные на специальных скриптовых языках программирования: 
Лауа5$сирь ҮВЅсгірг и др. Исходный текст сценария представ- 
ляет собой часть умеБ-страницы или внешний подключаемый 
файл, поэтому сценарий ЈауаЅсгірі передается клиенту вме- 
сте с документом, в состав которого он входит. Обрабатывая 
НТМГ-документ, браузер обнаруживает исходный текст сцена- 
рия и выполняет его. 

Лауа$ сре является наиболее популярным языком сцена- 
риев в Интернете и может быть обработан большинством со- 
временных браузеров. Он является интерпретируемым языком 
(это значит, что скрипты исполняются без предварительной 
компиляции) и распространяется свободно, без необходимости 
покупки лицензии. 

ЈауаЅсгірі может использоваться для управления међ- 
страницами, взаимодействия с пользователем и взаимодей- 
ствия с мер-сервером. 

Так, с использованием Јауа$сгірі можно: 

— добавлять новый НТМГ-код на страницу, изменять суще- 
ствующее содержимое, модифицировать стили; 

— обрабатывать действия пользователя, щелчки мыши, пе- 
ремещения указателя, нажатия клавиш; 

— отправлять сетевые запросы на удаленные серверы, ска- 
чивать и загружать файлы; 

— сохранять и получать информацию на компьютере кли- 
ента (сооКіеѕ). 

При этом возможности ЈауаЅсгірі в браузере ограничены для 
обеспечения безопасности пользователя. Цель этого — предот- 
вращение доступа недобросовестной меЬ-страницы к личной 
информации или нанесения ущерба данным пользователя. Ни- 
же приведены примеры таких ограничений: 
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— ЈаүаЅсгірї не может использоваться для получения или 
сохранения произвольной информации на диске компьютера- 
клиента, копирования информации, запуска на выполнения 
других программ; 

— ЈауаЅсгірі имеет ограниченные возможности работы 
с файлами; 

— существуют способы взаимодействия ЈауаЅсгірі с каме- 
рой/микрофоном и другими устройствами, но они требуют 
явного разрешения пользователя; 

— ЈаүаЅсгірг не имеет возможностей для обращения со стра- 
ницы, открытой в одной вкладке браузера, к другой вкладке 
браузера, если они были загружены с разных сайтов. Чтобы 
обойти это ограничение, обе страницы должны согласиться 
с этим и содержать ЈауаЅсгірг-код, который специальным об- 
разом обменивается данными. 


5.2. Основы создания скриптов на языке ЈауаЅсгірќ 


Изучение ЈауаЅсгірг начнем, как это принято, с вывода при- 
ветствия. 
Пример ниже реализует вывод приветствия в модальном окне: 


<!-- документ, содержащий скрипт --> 
<!БОСТУРЕ И+т1> 
<Боду> 
<!-- начало скрипта --> 
<5сг1ре> 


/* Инструкция Ј25сгірЕ, которая выведет 
сообщение "Не (о, мога!" */ 
а1ег{ ("Не11о, мог1а!"); 
// Конец скрипта 
</ѕсгірі»> 
</Боау> 
</ћёт1> 


Данный пример показывает несколько правил оформления 
скриптов: 

— каждая инструкция заканчивается точкой с запятой; 

— однострочные комментарии начинаются с двойной косой 
черты //. 

— многострочные комментарии ограничиваются знаками 


Ы" 
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Для внедрения Јауабсгірг непосредственно в текст НТМІ.- 
страницы используется тег НТМЕ, <ѕсгірё>...</5сгірё>. 

Јауа$сгірё также может быть помещен во внешний файл. 
Внешние файлы ЈауаЅсгірг обычно содержат код, который ис- 
пользуется несколькими различными мер-страницами. Внеш- 
ние файлы Лауа5 сре имеют расширение .јѕ. Внешний скрипт 
не должен содержать теги <ѕсгірі>...< /ѕсгірї>. Для вызо- 
ва внешнего скрипта из текста документа используется тег 
<5сИрЕ> следующим образом. 


<!БОСТУРЕ ҺЕт1> 
<һеаа» 


<5ѕсгірё $гс = “5/Муѕсгірі.ј5°°></5сгірі> 
</һеаа> 
<Боду> 


</Боау> 
</ћЕм1> 


В следующих главах мы рассмотрим особенности языка 
Јауа$сгірї и его применения для клиентской обработки в меБ- 
приложениях. 


5.3. Основы языка Јауа$сгірї 


Переменные и операторы ЈауаЅсгірг используются для хра- 
нения значений или выражений и выполнения простых опера- 
ций над ними. 

Переменная может иметь короткое имя, например, х, или 
более информативное имя, например, сагМате (название ав- 
томобиля). Имена переменных чувствительны к регистру 
(у и Ү — это две разных переменных). Имена переменных 
должны начинаться с буквы или символа подчеркивания. 

Создание переменных в Лауа5 сре также называют «объ- 
явлением» переменных. Объявление переменных ЈауаЅсгірі 
выполняется с помощью ключевого слова Іеё. После создания 
перемененной в нее можно поместить какое-либо значение. Да- 
лее это значение можно тем или иным образом использовать: 


Іеї һоЅџдеп; // объявляем переменную 
һоѕёидепё = 'Иванов'; // присваиваем ей значение 


а1егі(ћоѕёидепі); // выводим содержимое переменной 
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Јауа$сгірі является языком программирования с динамиче- 
ской типизацией. Это означает, что при присвоении значений 
переменным их тип определяется автоматически. В данном 
вводном курсе мы рассмотрим только самые распространен- 
ные из этих типов1. 

Первый тип — строковые переменные. Они задаются од- 
ним из следующих способов: 


/* Можно использовать двойные ПРЯМЫЕ кавычки */ 


Іеї 51г1 = "привет!"; 
/* Можно использовать одинарные ПРЯМЫЕ кавычки */ 
1еЕ 512 = 'привет!'; 


/* Обратные кавычки позволят встраивать значения других переменных 
или Выражений*/ 
Іеї рһгаѕе = `Вася ${$%г2}`; 


// выведет: Вася привет! 
а1егі(рћгаѕе); 


Встраивать в строку можно также выражение, например, 
так: 


а1егїі('результат: ${1 + 2}' ); // выведет "результат: 3" 


То есть выражение нужно заключить в фигурные скобки, перед 
которыми поставить знак доллара, а строку взять в «обратные» 
кавычки. 

Самый простой оператор для строковых переменных — это 
сцепление или конкатенация строк (+): 


Іеї пате = ' Вася"; 
Іеї пеѕѕаре = ‘'привет'; 
Іеї т = пате+ ', ' + меѕѕаре; 


В результате в переменной т будет лежать значение Вася, при- 
вет’. 
Второй тип данных — числа. 
Этот тип позволяет использовать как целочисленные значе- 


ния, таки числа с плавающей точкой. 


Іеї п = 123; 
п = 12.345; 


1 Подробнее о типах ЈауаЅсгірї см.: Брз:/Леагп.дауазсиретиа/урез 
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Существует множество операций для чисел, например, ум- 
ножение «*», деление «/», сложение «+», вычитание «-» , оста- 
ток от деления нацело «%», увеличение на единицу (инкре- 
мент) «+ +», возведение в степень «**», и т. д. 

Третий из базовых типов — булев тип (БооІеап). Перемен- 
ные этого типа могут принимать только два значения: тие 
(истина) и Ёа[ѕе (ложь). Значения булевого типа обычно полу- 
чаются как результат операций сравнения (>, <, == (равно), 

= (меньше или равно), > =). Например, результатом вы- 
ражения 2 > 3 будет булево значение #а[5е. 

Над логическими значениями могут выполняться логиче- 
ские операции. Пусть х = биу = 3. Таблица ниже объясняет 
логические операции: 





Оператор Описание Пример 





логическое И (х < 10 &&у > 1) - это истина 


логическое НЕ (х == у) это истина 











Очень часто при взаимодействии с пользователем приходит- 
ся учитывать различные даты или время. Для того, чтобы их вво- 
дить и хранить существует специальный тип раѓе. Пример: 


Іе+ пом = пем ра+е(); 
/* Создает объект рае с текущей датой и временем */ 
а1егі( пом ); 


пеуу Ра!е(уеаг, шоп, аѓе, Һоигѕ, тіпиѓеѕ, зесоп4$, 11$) соз- 
дает дату с указанными параметрами: 


/* год, месяц (нумерация от нуля), число, часы, минуты, секунды, 
миллисекунды */ 

Іеї дафе = пем раїе(2019, 6, 1, 2, 3, 4, 567); 

а1ег{( дае ); // 1.01.2019, 02:03:04.567 


Для данных типа раѓе наиболее часто встречаются операции 
получения одного из параметров: 

— зеРиПуУеаг() — получить год (из 4 цифр) 

— зеМоп®0О — получить месяц, от 0 до 11. 

— се ае() — получить число месяца, от 1 до 31. 

— се Ноиг$(), геМтие$(), веіѕесопаѕ(), <еМИзесопа$() — 
получить соответствующие компоненты. 


Іеї у = даЕе.вефРи11Уеаг(); // Получение года 
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При выполнении скрипта инструкции обычно сами пре- 
образуют переданные им значения к нужному типу данных. 
Например, а[ег( автоматически преобразует любое значение 
к строке. Математические операторы преобразуют значения 
к числам. Однако бывают ситуации, когда нужно явно преоб- 
разовать значение в нужный тип. 

Далее показаны функции, которые преобразуют значения 
переменных в нужный тип: 


/* Б теперь содержит не строку, а число 123 */ 
Іеї а = "123"; 
Іе Б = М№трег(а); 


/* Ь теперь содержит не число, а строку "123" */ 
Іеї а = 123; 
Іеї Б = Ѕігіпе(а); 


/* Ь теперь содержит не число 1, а значение гие */ 
Іеї а = 1; 
Іеі 6 = Воо1еап(а); 


Инструкции взаимодействия с пользователями. Чтобы 
показать пользователю результаты работы скрипта или за- 
просить у него какие-либо действия, необходимые для работы 
скрипта, используются так называемые модальные окна. Они 
бывают трех типов. 

1. аегЕ — выводит некоторое сообщение, которое исчезает, 
после нажатия кнопки ОК: 


а1егі("Это результат работы скрипта Јауаѕсгірі"); 


В результате появится окно с соответствующим текстом 
и кнопкой: 


Подтвердите действие 


Это результат работы скрипта ЈауаЅсгірї 


2. рготрЕ — содержит поле для ввода информации от поль- 
зователя и две кнопки, ОК и Отмена: 


Іеі пате = рготр* ("Введите Ваше имя: ", "Вася?"); 
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В результате пользователь увидит модальное окно, в котором 
есть область для ввода ответа на вопрос: 


Подтвердите действие 


Введите Ваше имя: 


| 21 ) 








ок | Отмена 


В этой области находится значение второго необязательного 
параметра (значение по умолчанию). Если пользователь нажи- 
мает на кнопку ОК, введенное значение помещается в строко- 
вую переменную пате. 

3. сопігт — показывает сообщение и ждет, пока пользова- 
тель нажмет ОК или Отмена. В результате возвращается значе- 
ние ігие, если нажата ОК, и ѓа[ѕе, если нажата кнопка «Отмена» 
или Езѕс с клавиатуры. 


Іеї а = сопћгт( "Запомнить пароль? "); 


Подтвердите действие 


Запомнить пароль? 


23 Ба 


Оператор условия. В тексте программ на ЈауаЅсгірі часто 
применяются операторы условия, которые позволяют прове- 
рить, возвращается ли значение «истина», а затем выполнить 
другой код в зависимости от результата. Самая распространен- 
ная форма условия называется і... еіѕе. Например: 


Іеї 1Іапвиаве = 'Јауаѕсгірі'; 
1+ (1апеиаве == 'Јамаѕсгірі') { 
а1егі('Да, я изучаю Јамаѕсгірі!'); 


} 
е15е { 
а1егі('Нет, Јауаѕсгірі я не изучаю’); 


} 


Выражение внутри # использует оператор тождества ( = = ), 
чтобы сравнить переменную [апзиазе со строкой ЈауаЅсгірі 
и увидеть, равны ли они. Если это сравнение возвращает (гие, 
выполняется первый блок кода. Если нет, первый блок кода 
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пропускается и выполняется второй блок кода, после инструк- 
ции е[зе. 

Для задания более сложных условий выбора используется 
конструкция 1....е[5е 1}...е[5е: 


Іеї а = пем Баее(); 
Іеї біте = а.реЁНоигѕ(); 
ТЕ (%іте < 10) 


{ 
а1егі(' Доброе утро'); 
} 
е15е 
{ 
1+ (їіте >= 10 && біте <= 16) 
{ 
а1ег* ("Добрый день’); 
} 
е1ѕе 
{ 
а1егїі('Добрый вечер’); 
7 
} 


Циклы. Это еще один тип структурных операторов языка, ко- 
торые используются для многократного повторения одного и то- 
го же блока инструкций. В Лауа$сир: существует два типа циклов. 

Цикл јог используется, когда вы знаете заранее, сколько раз 
должен быть выполнен скрипт или его фрагмент. 

Пример ниже определяет цикл, который начинается сі = 0. 
Цикл продолжает выполняться до тех пор, пока 1 меньше или 
равно 5. Значение 1 будет увеличиваться на 1 при каждой ите- 
рации цикла. 


Іеї і; 
Ғог (і = 0; 1 <= 5; і++) { 
а1егі("Число 1 равно " +1); 


} 


Цикл иййе выполняет блок кода, пока указанное условие 
истинно. Пример ниже решает предыдущую задачу с исполь- 
зованием мћіе. 


1е і = 6; 

мһі1е (1 <= 5) { 
аІегі("Число 1 равно 
і++; 


; 


+ 1); 
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5.4. Функции ЈауаЅсгірї 


Чтобы предотвратить выполнение скрипта браузером, пока 
страница полностью не загрузилась, или чтобы многократно 
выполнить одно и то же действие в разных частях страницы, 
рекомендуется помещать скрипт в функцию. Функция содер- 
жит код, который будет выполнен в процессе работы со стра- 
ницей, но только если наступило некоторое событие. 

Функции можно поместить: 

— в область заголовка документа <Беаа>...</Веаа>, об- 
рамляя их тегами <5сгірі>...< /ѕсгірі>; 

— в конец НТМГ-страницы, обрамляя их тегами <5сгірѓі>... 
< /ѕсгірг>; 

— во внешний /5-файл, подключая его в области заголовка 
или в конце тела страницы с использованием тегов <сгірі ѕгс 
= "...е.]5"> < /ѕсгірг> 

Общий синтаксис определения функции: 


Фипс1оп имя_функции(\аг1, маг2, ..., магМ) 


{ 


некоторый код 


} 


Параметры уаг1, уаг2 и т. д. — это переменные или значе- 
ния, передаваемые функции. Фигурные скобки определяют на- 
чало и конец функции, например: 


Ғипсёіоп ѕһомМеѕѕаве(пате, ех) // аргументы: пате, ех 


{ 
а1ег{ (паме+ ', ' + ех); 
р 
ѕһомМеѕѕаре('Аня', 'Привет!'); // результат: Вывод в модальном 


окне Аня: Привет! 


Функция без параметров должна включать круглые скобки 
О после имени функции. То есть, если функция не принимает 
никаких значений извне, ее нужно использовать так: 


Фипс1оп ѕһомМеѕѕаре() // аргументов нет 


у 
а1ег{('Аня, привет’); 


} 


ѕһомМеѕѕаве(); // результат:Аня, привет! 
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Возврат значений. Предложение геѓигп используется для 
указания значения, которое возвращается из функции. Таким 
образом, функции, которые возвращают значения, должны ис- 
пользовать предложение геѓигп. 

Следующий пример возвращает произведение двух чисел 
(аи Б). 


Ғипсъіоп ргоаис+(а, Б) 


{ 


гефигп а*Ы; 


} 


а1егі(ргоӣисї(4, 3)); 


5.5. Строки и массивы Јауа$сгірї 


Для создания программ на любом современном языке про- 
граммирования уже недостаточно просто переменных. Все 
языки «умеют» работать с более сложными типами данных, ко- 
торые объединяют информацию в массивы, объекты, перечни, 
последовательности и т. д., и содержат средства эффективной 
обработки таких сложных структур. Здесь мы ограничимся 
только рассмотрением строк и массивов Лауа$стре. 

В ЈауаЅсгірг любые текстовые данные являются строками. 
Не существует отдельного типа «символ», который есть в ряде 
других языков. Все символы в строке кодируются в формате 
ОТЕ-16, независимо от кодировки страницы. 

Строка в ЈауаЅсгірг — это объект, который имеет множество 
полезных свойств и методов. 

Свойство [еп определяет длину строки: 


Іеї $&г = 'Не11о, мог1а! '; 
а1ег{ ($4г.1еп2ЕВ); // выведет 13 





Свойство записывается БЕЗ круглых скобок! 





Получить символ, который занимает позицию М, мож- 
но с помощью квадратных скобок: [№]. Первый символ имеет 
номер 0. 


Іеї 51 = 'Не110'; 
а1егїі( ѕ+г[0] ); // получаем первый символ Н 
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// получаем последний символ 
а1егїі( ѕ1г[56г.1епеёһ - 1] ); // о 


Содержимое строки в Лауа$ стре нельзя изменить. Изменить 
строку можно только при ее замене с тем же именем. 


Іеї 517 = 'Да'; 
Ѕ4г[0] = 'д"; // ошибка 
${г = 'д’ + 51"[1]; // заменяем строку 


Методы юГоиегСазе() и юИррегСа$е() меняют регистр сим- 
волов: 


а1егі( 'Не11о, Мог1а!'.ёоуррегСаѕе() ); // НЕГО, МОЮ! 
а1егі( "Не110, Мог1а!'.ёоіомеСаѕе() ); // Ае іо, мога 


Для поиска подстроки (определения того, есть ли такое 
включение символов в исходной строке) можно использовать 
метод ѕіғ.іпаехОү(ѕиБѕіг, №. Он начинает искать ѕиђѕіг в стро- 
ке 5, начиная с позиции М, и возвращает позицию, на которой 
располагается совпадение, либо -1 при отсутствии совпадений. 

В следующем примере в строке «абракадабра» выполняется 
поиск индексов, начиная с которых в ней содержится строка 
«абра». 


Іеї ѕ1г = 'абракадабра'; 
Іеї +агвеї = 'абра'; // цель поиска 


Іеї М = 0; // позиция с которой начинаем поиск 
мһі1е (гие) // цикл, который позволит пройти по Всей строке 


{ 
Іеі № = ѕ1г.іпаехо#(+агвеё, №); // сохраняем позицию 
ЇР (№ == -1) { 
// если не было Включений, Выходим из цикла 
Бгеак; 
} 
е15е { 
аїегі( 'Найдено тут: $4{№1}' ); 
// если было найдено совпадение, выводим позицию 
№ = № + 1; // продолжаем с позиции, которая следует после 
заданной 
} 
} 


В Лауа$ сре есть несколько методов для получения подстро- 
ки, например, ѕирѕёг и $[се. 


71 


Тодт: @й Ббооокѕ 


Метод $Псе позволяет «вытащить» символы из исходной 
строки от начальной позиции до конечной (не включая символ 
конечной позиции). 


1еЕ $%г = "абракадабра"; 
а1еге( $%.$11се(1, 5) ); // “брак”, символы от 1 до 5 
(не включая 5) 


Если второй параметр не задан, выбираются все символы 
до конца строки. 

Метод заб позволяет «вытащить» символы из исходной 
строки от начальной позиции в количестве І. 


Іеї ѕ1г = "абракадабра"; 
а1егЕ( $%г.зиб$г(2, 3) ); // рак, получаем 3 символа, 
начиная с позиции 2 


Задача обработки строковых выражений, которые вводит 
пользователь на странице является очень распространенной 
и важной. Поэтому перед началом обработки, во избежание 
ошибок, необходимо проверить, не является ли строка пустой. 

Пример. Пусть необходимо написать функцию, которая пе- 
реводит первую букву введенной строки в верхний регистр: 


Ғипсёіоп исЕ1г5($%г) { 


Те (15%г) { 
геёигп "Строка пуста"; 
} 
е1ѕе { 
геёигп $%г[0].+о/ррегСазе() + $%г.$11се(1); 
} 
} 
1еЕ ѕ1г = "вася"; 


а1егі( исЕ1г5Е($%4г) ); // результат: Вася 


Также, как в любом другом языке высокого уровня, 
в ЈауаЅсгірг массивы (аггау) используются для хранения и об- 
работки наборов каких-либо однородных данных: пользовате- 
лей, товаров, элементов НТМЕ и т. д. 

Для создания нового пустого массива может использоваться 
конструкция: 


// Пустой массив с именем агг1 


Іеї агг1 = []; 
= ['Москва', 'Тула', 'Сочи']; // Массив с названиями 


Іеї сіїіеѕ 
городов 
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К отдельным элементам массива обращаются по индексам 
(первый элемент массива имеет индекс 0): 


аїІегі(сіїіеѕ[0]); // Результат: Москва 


Можно изменить любой из элементов массива: 

©1{1е$[2] = 'Калуга'; // Теперь [ “Москва”, “Тула”, “Калуга” |] 
Можно добавить элемент к имеющемуся массиву: 

сібіеѕ[3] = "Орел"; // Теперь [ “Москва”, “Тула”, “Калуга?” ,”орел”] 


Количество элементов массива получают через свойство 
[еп й: 


а1егі(сіїбіеѕ.1Іепеёһ ); // Результат: 4 


Наиболее распространенный алгоритм работы с масси- 
вом — это перебор его значений в цикле: 


Іеї сіїіеѕ = ['Москва', 'Тула', 'Сочи']; 
Ғог (Іеї 1 = 0; 1 < сіїіеѕ.1Іепеіһ; і++) 


аїІегі( сіёіеѕ[і] ); 


} 


5.6. События ЈауаЅсгірї 


ЈауаЅсгірг позволяет создавать динамичные м’ер-страницы. 

В соответствии с объектной моделью документа (РоситепЕ 
ОЪјесё Моае[, РОМ), каждый НТМГ-тег является объектом. Вло- 
женные теги являются «потомками» родительского элемента. 
Текст, который находится внутри тега, также является объек- 
том. Все эти объекты доступны Лауа$ сре, мы можем исполь- 
зовать их для изменения страницы. 

События — это действия, которые ЈауаЅсгірі может обна- 
ружить и отследить. Таким образом, процесс программирова- 
ния клиентской части меБ-приложений состоит в описании 
Јауа$сгірі-функций, которые связываются с наступлением раз- 
личных браузерных событий. 

В табл. 5.1 представлены основные события, которые могут 
быть связаны с м’еЬ-страницей. 
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Таблица 5.1 
Основные события браузера 
Группа Событие Описание 
События сіск Однократный щелчок левой кноп- 
мыши кой мыши 


сошехитепи Однократный щелчок правой 
кнопкой мыши 


тоиѕеоуег Наведение мыши на элемент или 
и шоиѕеоиі отведение от него 





тоцѕетоуе Движение МЫШИ 


События зибти Пользователь отправил форму 


формы 
Ғосиѕ Пользователь наводит фокус 


на элемент формы, например, 
<іприш> 


События до- | РОМСопѓепйоайеӣ | Документ загружен, РОМ доку- 
кумента мента полностью построен 





События Кеудомт и Кеуир Нажатие и отпускание клавиши 
клавиатуры 





Событию можно назначить обработчик, то есть функцию, 
которая сработает, как только событие произошло. 

Описание функции-обработчика может выполняться двумя 
способами. 

1 способ. Применяется, если к некоторому событию должен 
быть применен только один обработчик. Пример: 


<іприё уре = "Би{фоп" іа = "Биёоп1" уа1ие = "Кнопка" > 
<5ср1ірї»> 
Ғипсъіоп меѕ() { 
а1егі( 'Привет!' ); 


} 


БиЕЕоп1.0пс11сК = меб; 
</5сг1ре> 


Этот код создает кнопку с идентификатором БиНоп1, собы- 
тие опсіїск (нажатие) для которой вызовет функцию, выводя- 
щую приветствие. Обратите внимание, что функция в скрип- 
те вызывается как обработчик кнопки с идентификатором 
РиНоп1, а, значит, вызов этой функции должен быть располо- 
жен на ме-странице ниже, чем описание этой кнопки. Напри- 
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мер, все подобные вызовы, можно расположить в скрипте, на- 
ходящемся перед закрытием Боду. 

2 способ применяется тогда, когда нужно иметь возмож- 
ность добавлять несколько обработчиков одному событию. 
Для этого используют метод еіетепё.аааЕуепііѕќепег(еуепё, 
Пап ег), где еуепё — это событие, а Һапаіег — функция-обра- 
ботчик. Например: 


// Выводим кнопку с идентификатором "Би Топ1” 


<1приЕ іа = "Би{оп1" фуре = "Биф®оп" уа1ие = "Нажми меня" /> 
// Начинаем скрипт 
<5сгірї»> 


// Описываем первую функцию с некоторыми действиями 
Ғипсёіоп һҺапа1ег1() { 
а1егї('Вы нажали кнопку первый раз’); 
} 
// Описываем вторую функцию с другими действиями 
Фипс1оп һапа1ег2() { 
а1егі('Вы нажали кнопку второй раз!'); 
} 
// Метод отслеживает событие и каждый раз Выполняет следующую 
по счету функцию 


риё+оп1 . аааєуепёііѕёепег ("с1іск", һапа1ег1); // “Вы нажали 
кнопку первый раз”? 

риё+оп1 . аааєуепёііѕёепег ("с1іск", һапа1ег2); // “Вы нажали 
кнопку Второй раз!' 
</5сг1рЕ> 


5.7. Несколько примеров использования Јауа$сгірї 


В первом примере по данной теме предлагаем создать рас- 
крывающееся меню с применением Јауа$Ѕсгірї. 


<!БОСТУРЕ НТМЕ» 
<Ит1> 
<һеаа» 
<тефа сһагѕет = "иЁҒ-8" > 
<5+у1е> 
/*-- Объявляем стили для будущих тегов и классов меню */ 
р{ 
тагвіп:Өрх; 
райдіпе:Өрх; 
| 
.тепи { 
сиг5ог :ро1пт*ег; 


} 
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/* Элементы, имеющие класс ѕиђтепи, являются скрытыми, с нулевой 
Высотой, полностью прозрачными, но при их появлении будет исполь - 
зоваться плавная анимация, ускоряющаяся к концу */ 
.ѕибртепи { 
оуегЯош: һіааеп; 
һеірһё: 0; 
орасіїу: 0; 
гапѕіёіоп: а11 0.55 еаѕе-іп; 
} 
</з%у1е> 
</Неаа> 
<Боду> 
<и1> 
<11 с1аѕ5 = "тепи"> 
<р>Новости</р> 
<и1 с1аѕѕ = "зибтепи" > 
<11 >Новости культуры</11> 
<11 >Новости спорта</11> 


</и1> 
</11> 
<11 с1аѕ5 = "мепи"> 
<р>Наши продукты</р> 
<и1 с1аѕ5ѕ = "ѕиртепи" > 


<11 >Продукт 1</11> 
<11 >Продукт 2</11> 
</и1> 
</11> 

</и1> 

// Описываем скрипт 

<5сг1ре> 

// Соберем коллекцию из элементов класса тепи 

Теё е1Мепи = доситеп* . ве Е1етеп*$ВуС1а$ Мате ( 'тепи’); 

/* В цикле обойдем эту коллекцию и укажем, что, если с любым 
из ее элементов случается событие наведения или отведения мыши, 
нужно Выполнять одну из описанных ниже функций*/ 

Ғог(1Іе 1 = 0; 1‹е1Мепи.1епе И; 1++) { 

е1Мепи[ і] .аааєуепеіѕ&епег ( "тоиѕеоме", ѕһомѕиь, Ға1ѕе); 
е1Мепи[1і].аааеуепёі іѕъепег ( "тоиѕеоиё", һіаеѕиб, Ға1ѕе); 

1 

// Функция показа подменю 

//Для Всех дочерних элементов, относительно текущего (1115) 

Ғипсііоп ѕһомЅир(е) { 

іҒ(һіѕ.сһі1агеп.1епеёһ>1) { 
+һіѕ.сһі1агеп[1].5%у1е.һеіеһі = "аиёо"; 


+һіѕ.сһі1агеп[1].5%у1е.оуегћои = "\1$161е"; 
+һіѕ.сһі1агеп[1].5%у1е.орасіїу = "1"; 

} 

е1ѕе { 
гефигп Ға1ѕе; 

р 


} 
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// Функция скрытия подменю 
// Для Всех дочерних элементов, относительно текущего (+115) 
Ғипсёіоп һіаеѕир(е) { 
1+ (4615.сИ11агеп.1епёН>1) { 
їһ1іѕ.сһі1агеп[1].5+уІе.һеівһї = 0; 
+һіѕ.сһі1агеп[1].5%у1е.оуегћом = "һіддеп"; 
+һіѕ.сһі1агеп[1].5%у1е.орасіїу = 0; 
А 


е1ѕе { 
геёигп Ға1ѕе; 


} 
} 
</зсг1ре> 
</Боду> 
</ћЕт1> 


В результате получим примерно такую страницу: 


• Новости 


о Новости культуры 
о Новости спорта 


• Наши продукты 


Пункт верхнего уровня Новости будет «раскрываться» при 
наведении на него мыши (событие тои$еоуег). При этом пун- 
кты подменю плавно становятся видимыми. 

Конечно, более правильным будет разнести НТМГ-код, С$5 
и 5 -код в разные файлы и подключить стили и скрипты к ос- 
новному НТМІ -документу как внешние источники. Этот подход 
демонстрируется в следующем примере, который представляет 
некоторую минигалерею (рис. 5.2) (использованы материалы 
сайта һерѕ:/ /млеМогтузеЁ.сот). 





Масіпіоѕћ_128 


1ВМ-5150 


Арріе-ії год выпуска - 1984 
год выпуска - 1982 


год выпуска - 1977 


Рис. 5.2. Результат вывода проектируемой минигалереи 
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Этот проект имеет следующую структуру: 
1 іта 
е іпадех.Һіті 
5) тујѕ.јѕ 


ѕіуіеѕ.с55 


Изображения хранятся в папке іте, а в корневой папке хра- 
нятся основной файл шаех.Б т], файл стилей $у1еѕ.сѕѕ и скрипт 
туј.]. 

Предположим, что такую галерею мы хотим реализовать 
на «чистом» НТМІ. Тогда содержание файлов іпӣех.Һті и $у]еѕ. 
сѕЅ должно быть примерно следующим. 

Файл шаех.Выт1. 


<1рОСТҮРЕ һЕм1> 


<Һетм1> 
<Веад> 
<тефа сһагѕе = "ОТЕ-8"/> 
<!-- Подключаем внешний файл стилей --> 
<Ііпк ге1 = "ѕ+у1Іеѕһее" пге+ = "51у1еѕ.с55"> 
</һеаа> 
<Боду> 
<!-- описываем блок со всем содержимым страницы --> 
<аіу с1аѕѕ = "арр"> 


<!-- Организуем блок, который позволит выравнивать экзем- 
пляры галереи с применением ЙехБох --> 


<аіу с1аѕ5 = "11ѕ1"> 
<!-- Организуем карточки, в которых собрана Вся необходи- 
мая информация о каждом экземпляре галереи --> 
<аіу с1аѕѕ = "сага"> 
<аіу с1аѕ55 = "сага іте" > 


<ітЕ 5гс = 'іте/33ерх-Арр1е-ІІ.јр='> 
<ҺЗ>АррІе-ІІ<һЗ> 


</аіу> 

<р>год выпуска - 1977</р> 
</аіу> 
<аіу с1аѕѕ = "сага" > 

<аіу с1аѕ55 = "сага іте" > 


<ітЕ 5гс = 'іте/33ерх-ІВМ 5150 РС.јре'> 
<А3>ІВМ-5150<һ3> 


</аіу> 

<р>год выпуска - 1982</р> 
</аіу> 
<аіу с1аѕѕ = "сага" > 

<аіу с1аѕ5 = "сага іте" > 


<іте 5с = 'іте/3зерх-Масіпёоѕһ 128к ёгапѕрагепсу.рпе' > 
<ҺЗ>Масіпёоѕһћ_ 128<һ3> 
</аіу> 
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<р>год выпуска - 1984</р> 
</аіу> 
</аіум> 
</аім> 
</Боду> 
</һёт1> 


Файл ѕіу1еѕ.с55. 


.арр + 
тах-міаёһ: 1000рх; 
парвіп: 5@рх аи+о; 


} 


.1154 { 
аїѕр1ау: Чех; 
јиѕі+у-сопёепё: ѕрасе-беїмееп; 


} 


„сага { 
міаєһ: 2009рх; 
рада1т=: 1@рх; 
Богаег: 1рх $0114 #ссс; 
Богдег-гад1и$: Зрх; 
{гап$1%1оп: Бох-5Надом .35 еаѕе-іп-ои+; 


} 


.сага:һоуег { 
рох-ѕһайом: 2рх 2рх @ грБа(0, 6, Ө, .15); 
} 


.сага-іте { 
аіѕр1ау: Пех; 
а1івп-ібетѕ: сепфег; 
һеівһі: 150рх; 


Вы можете заметить, что если возникнет необходимость вы- 
вести в этой галерее не 3, а 103 объекта, повторение этих «кар- 
точек» в коде НТМІ становится довольно неприятной рутинной 
задачей. Попробуем решить ее более эффективно с использова- 
нием ЈауаЅсгірг. 

В подготовленном в папке проекта файле тујѕ.јѕ введем сле- 
дующий код: 


/* Формируем структуру, описывающую данные галереи */ 
Іеї сотрѕ = [ 
{рісі : 'іте/33ерх-Арр1Іе-ІІ.јрЕ', 
пате : 'Арр1Іе-1ІІ', 
пое: 'год выпуска - 1977 '}, 
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{рісі : '115/3309рх-ТВМ 5150 РС.јрв', 
пате : 'ТВМ-5150', 
пое: 'год выпуска - 1982'}, 
{рісі : 'іте/3зерх-Масіпёоѕһ 128к +гапѕрагепсу.рпе', 
паме : 'Масіптоѕћ_128', 
пое: ' год выпуска - 1984'} 
] 
/* Создаем функцию, получающую в качестве аргумента один из эле- 
ментов этой структуры. Конкретные значения выводимых элементов 
заменяем на свойства переменной, соответствующие элементам описан- 
ной Выше структуры */ 
/* Важно использовать для Вывода НТМЕ-КОДА КОСЫЕ КАВЫЧКИ, ИМЕННО 
ТАК, как показано ниже*/ 
Ғипсёіоп сгеафеСага ( сотр) 
гефигп ` 
<41\у с1аѕ5="сага" > 
<аіу с1аѕ5="сага іт" > 
<іте $гс="${сотр.р1с*}"/> 
<3>${ сотр.пате}</һ3> 
</аіу> 
<р>${ сотр .пофе}</р> 
</а1\> 


} 


/* Получаем набор данных (список, которые содержит Все элементы 
структуры, оформленные 6 соответствии с функцией СгеатеСага) */ 
1е 115ЕСотр = сотрѕ.тар(сотр = > сгеа%еСага (сотр) ) 


/* Разделяем полученный список элементов, например через пробел */ 
еі ВЕт1 = 115+Сотр.јоіп(' ') 


// Выводим разделенный список на странице в область с классом (15% 
доситеп* . диегуѕе1есіог('.1151').іппегнНтмі = һёт1 


При этом, естественно, в файле ш4ех.Вит нужно убрать все 
содержимое документа, и подключить скриптовый файл: 


<!БОСТУРЕ һҺЕт1> 
<ћіт1> 
<һеаа» 
<тефа сһагѕе = "ОТЕ-8"/> 


<Ііпк ге1 = "ѕ#у1еѕһее" һгеҒ = "5%у1еѕ.сѕ5"> 
</Неаа> 
<Боду> 
<аіу с1аѕ5 = "арр"> 
<аіу с1а55 = "1151"> 
</аім> 
</аім> 
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<ЅсгірЕ $гс = "тујѕ.ј5"></5сгірі» 
</боау> 
</ҺЕтм1> 


Полученный результат должен полностью совпасть с резуль- 
татом, представленным на рис. 5.2. 


5.8. Библиотеки ЈауаЅсгірї 


С развитием ММГ все большее значение придавалось про- 
стоте и скорости разработки при одновременном увеличении 
требований к качеству получаемого результата. М/еБ-ресурсы 
должны были становиться все более привлекательными, 
с большим количеством визуальных эффектов, с удобными воз- 
можностями обратной связи, но при этом быстро загружаться. 
Кроме того, в разных браузерах была по-разному реализована 
объектная модель документа (РОМ), что обусловило необхо- 
димость затрачивать дополнительные усилия на реализацию 
корректного отображения страниц в различных браузерах. 
В результате было создано немало примеров решения таких за- 
дач, которые можно использовать в качестве готовых функций 
и шаблонов. 

Библиотека ЈауаЅсгірі — это сборник готовых классов или 
функций пользовательского интерфейса, встраиваемых в меВ- 
приложения. Они не только содержат готовые решения типо- 
вых задач, встречающихся при создании динамических мер- 
страниц, но и позволяют упростить взаимодействие ЈауаЅсгірі 
с другими языками, такими как С$5, РНР, Киђу и т. д. 

Одной из наиболее популярных библиотек ЈауаЅсгірїі явля- 
ется Очегу, фокусирующаяся на взаимодействии Лауа$ сре, 
НТМІ и С55. 

Подключение ЛОиегу. Библиотека подключается с использо- 
ванием тега 


<Ѕсгірё 5гс = "һҺёЕрѕ://соаде. јаоегу.сот/јдоегу-2.2.4.тіп.ј5"></ѕсгірі» 


В этом случае нужные компоненты библиотеки в нужный 
момент подгружаются по СОМ оп-Ппе. 

Основы использования ЛОиегу. Синтаксис оператора чегу 
можно представить следующим образом: 


$('селектор') .действие( ' свойство действия) 
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Здесь: 

— селектор — элемент или элементы, над которыми вы- 
полняется действие; 

— действие — что именно мы будем делать с выбранными 
элементами (можно добавить какой-либо эффект, С55-стиль, 
изменить НТМГ-код, указать какие-либо события); 

— свойства действия — дополнительные атрибуты, свя- 
занные с данным действием. 

Приведем несколько примеров использования ЛОцету. 

Изменение стиля элементов страницы. Пусть необходимо 
изменить цвет заголовка страницы. 


<!РОСТУРЕ һЕт1> 
<Ит1> 
<Неаа> 
//Подключение библиотеки 30чегу 
<ѕсгірі ѕгс = "һҺіёрѕ : //соае. јаиегу. сот/јаоегу-2.2.4.тіп.јѕ"> 
</зсг1ре> 
<тефа сһагѕе = "ОТЕ-8"/> 
</һеаа»> 
<Боау> 
<ћ1>Заголовок 1</һ1> 
<р>первый абзац</р> 
<ћ2>›Заголовок 2</һ2> 
<р> Второй абзац </р> 
<ѕсгірё> 
// в этом скрипте описывается ЈОиеғу-функция, 
// которая умеет менять стиль элементов 
$( Ғипсъіоп(){ 
$("һ1").сѕ5("со1ог", "егееп"); 
}); 
</ѕсрірЕ> 
</Боду> 
</ћм1> 


То, что функция начинается с $, означает, что будет исполь- 
зоваться Л/Очету. Вызов метода в оболочке этой функции озна- 
чает, что он выполнится после наступления события загрузки 
страницы. Этот код найдет на странице все заголовки Һ1 и из- 
менит их цвет на зеленый. 

Обработка событий иеђБ-страницы. ЛОчегу работает 
практически со всеми событиями в ЈауаЅсгірі, которые приво- 
дились выше. Аргумент (ћіѕ указывает, что действие будет про- 
изведено над текущим объектом. 
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Пример. При щелчке мыши по элементу абзаца цвет его 
шрифта будет изменен на красный. 


$(Ғипсііоп() + 
$ ("р") .с1іск(Ғипсёіоп() + 
$(6һ15).с55(4 
"со1ог": "геа", 
03 
2); 
}); 


Аналогично можно организовать любую другую реакцию 
на любое событие любого элемента. 

Интересные эффекты можно получить при анимации, вы- 
званной некоторыми событиями. 

Пример. Абзац после щелчка на нем мышью будет исчезать. 


$(Рипс1оп() + 
$("р"). сІіск(Ғипсёіоп() { 
$(+11$).114е(); 

}); 

}); 


И, в заключение пример выпадающего меню, которое рабо- 
тает также как меню из п. 5.6, но не на «чистом» ЈауаЅсгірї, 
а с использованием библиотеки ЛОчету. 


<!БОСТУРЕ НТМІ > 
<Һём1> 
<Веаа> 
<5СГ1рЕ гс = "ПЕрз: //соае. јдиегу.сом/јдиегу-2.2.4.тіп.јѕ"> 
</5сг1ре> 
<теёа сһагѕеё = "ОТЕ-8"/> 
</Неаа> 
<Боау> 
// Структура меню абсолютно аналогичная 
// приведенной в п. 5.6 
<и1 с1аѕѕ = "тепи" > 
<11> 
<р>Новости</р> 
<01 с1аѕѕ = "зибтепи"> 
<11 >Новости культуры</11> 
<11 >Новости спорта</11> 


</и1> 

</11> 

<11> 
<р>Наши продукты</р> 
<и1 с1аѕ5 = "зибтепи" > 
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<11 >Продукт 1</11> 
<11 >Продукт 2</11> 
</ч1> 

</11> 

</и1> 
<5сг1ре> 

// Функция доступна после загрузки документа 

$ (аоситеп®) . геаау(Ғипсёіоп () { 

/* Здесь используется так называемый псебдокласс Воуег, 
которые описывает поведение при наведении/отведении мыши на эле- 
мент */ 

$('.тепи 11').һомег( 

/* Срабатывает одна из функций которая раскрывает или закры- 
вает все элементы иі от текущего (1115). В скобках -- длительность 
этой анимации в миллисекундах */ 

Ғипсёіоп() { 
$('01', 4015$).5114ебомп (119); 
}, 
Ғипсёіоп() { 
Ф('01', +һіѕ).51ідеур(110); 
}); 
}); 
</ѕсгірі> 
</Боау> 
</Нт1> 


Теперь даже без указания дополнительных стилей результат 
будет таким же, как на чистом Лауа5 сре. 


5.9. Ј5-фреймворки 


Каждый год появляются все новые фреймворки, которые 
позволяют оптимизировать процесс «ЁопЕ еп4»-разработки 
сайтов. Среди них можно назвать Уче, Апешаг, Кеасїі и др. 
В частности, один из наиболее популярных в настоящее время 
фреймворк Кеасі использует объектно-ориентированную мето- 
дологию программирования и позволяет многократно исполь- 
зовать компоненты, которые объединяют любые объекты стра- 
ницы. Преимущество состоит в том, что таким образом можно 
удобнее управлять целыми компонентами (наборами блоков) 
при создании интерфейса мер-приложения. 

Далее на втором примере из пункта 5.7 рассмотрим прин- 
ципы применения Кеасї для вывода однотипных элементов 
на мер-странице. В результате мы должны получить страницу, 
содержащую три однотипных компонента-карточки, каждая 
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из которых содержит три блока — картинка, подпись и пояс- 
нение. Компонент включает название, изображение и некото- 
рое описание. Это классическая задача для Кеасі — управление 
компонентом, который содержит некоторые дочерние блоки 
или подкомпоненты. 

С официального сайта Веасё можно получить ссылки 
на внешние библиотеки, которые позволяют использовать го- 
товые решения, реализующие описанные выше принципы ком- 
понентного подхода в Кеасї. 

Итак, оставив неизменным файл стилей, внесем следующие 
изменения в файлы шаех.В ит] и тујѕ.јѕ. 

Файл шаех.Бит: 


<!РОСТУРЕ Ит1> 
<Вт1> 
<Веаа> 

<тефа сһагѕе = "ОТЕ-8"/> 

<+ії1е>Демонстрация Кеас*</+{11е> 

<Ііпк ге1 = "ѕ+у1Іеѕһее" Пге{ф = "5%у1е$.с$5"> 

<!-- Добавление Внешних ссылок на файлы из библиотеки ВеасЕ --> 

<ѕсгірі ѕгс = "Прз : //ипрке. сот/геас*@16/ита/геас*. 
деме1ортеп. ј5" >< /ѕсгірі» 

<Ѕѕсгірі ѕгс = "һҺЕЕрѕ : //ипрке. сот/ геасї- аот@16/ита/геасё-аот. 
деме1ортепі.ј5"></5ѕсгірі> 

<ѕсрірЕ гс = "Пр: //ипрке. сот/бабе1-ѕ+апаа1опе@6.15.0/ 
БбаБе1. тіп. јѕ"></ѕсгірі» 


</һеаа> 

<Боду> 
<!-- Добавление области для описания содержимого страницы --> 
<а1\ іа = "гоо" ></аіу> 
<!-- Подключение Внешнего собственного скрипта --> 


<!--Важно указать тип файла "ФехЕ/БаБе!”, чтобы новые Возмож- 
ности языка могли быть интерпретированы более старыми версиями, 


которые могут использоваться 6 вашем браузере -- > 
<5сгірі фуре = "+ехё/баре1" $гс = "ту]5.]5"></зсг1р®> 
</Боау> 
</һЕт1> 


Файл тујѕ.ј$: 


/* Описываем функцию, которая создает шаблон для вывода на стра- 
ницу одной карточки с экземпляром галереи. Коллекция значений, 
которые могут подставляться 6 этот шаблон Всегда описывается 

6 КеасЕ как ргор$ */ 

Ғипсёіоп Сотр(ргорѕ) { 

ге+игп ( 

<аіу с1аѕѕМате = "сага" > 
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<аіу с1аѕѕМате = "сага-іте" > 
<іте 
гс = {ргорѕ.сотр.ріс+} 
/> 
<А3›{ргорѕ. сотр. пате }</ћ3> 
</аім> 
<р>{ргорѕ. сотр. поёе}</р> 
</аіу> 
) 
} 


/* Описываем класс компонента Арр (приложение), наследуемого 
от компонента КеасЕ, в котором имеется его состояние ($таЁе) - 
в данном случае набор всех Возможных значений, и рендеринг 
(гепаег) - отрисовка на странице шаблона со связанным с ним состо- 
янием */ 
сіаѕѕ Арр ехъепӣѕ Кеас+.Сотропеп* { 
${афе = {сотрѕ: 
[ 
{рісі : 'іте/33ерх-Арр1е-ІІ.јре', 
пате : 'Арр1е-11', 
пое: ' год выпуска - 1977'}, 
{рісі : 'іте/33дрх-ІВМ 5150 РС.јрр', 
папе : 'ТВМ-5150', 
пое: ' год выпуска - 1982'}, 
{рісі : 'іте/33ерх-Масіпёоѕһ _128к +гапѕрагепсу.рпе', 
пате : 'Масіпёоѕћ _128', 
пое: ' год выпуска - 1984'} 


] 
1 
гепаег() 
{ 
геёигп ( 
<аіу с1аѕѕМате = "арр"> 
<аіу с1аѕѕМ№Мате = "115%"> 
{ 


/* Здесь используется метод тар - отображение каждого из элемен- 
тов в списке сотрѕ на его место в шаблоне Сотр*/ 
{115.5фафе.сотр$ .тар (сотр = > 
{ 
геёигп( 
<Сотр сотр = {сотр}/> 
) 
}) 
} 
</аім> 
</аіу> 
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// Вывод отрисованных шаблонов в отведенное для них место на стра- 
нице 
Кеас+ром. гепаег ( 

<Арр /> 

› Ӣоситеп& . веЕЕ1етепЕВуІа( ' гоо ')) 


Результат должен совпасть с представленным на рис. 5.2. 

Нельзя считать Кеасі полноценным /5-фреймворком, так 
в нем реализуются методы, позволяющие более удобно пред- 
ставлять только уровень представления, уіеи (подробнее 
об этом в теме 8 пособия). Однако его использование предо- 
ставляет разработчику возможность создавать более простой 
и понятный код на стыке НТМЕ и ЈауаЅсгірг за счет того, что 
НТМГ-фрагменты с использованием специального синтаксиса 
можно включить прямо внутрь Ј$-функций. В примере выше 
вы видите пример применения такого синтаксиса — круглые 
скобки после оператора гетагп. 


Контрольные вопросы 


1. Накакой стороне в клиент-серверной технологии выполняются 
ЈауаЅсгірі? 
Перечислите основные возможности языка Јауа$сгірг. 
Как можно добавлять код ЈауаЅсгірїі в мер-документ? 
Как задаются комментарии в тексте ЈауаЅсгірі? 
Как объявляются переменные ЈауаЅсгірі? 
Какие типы переменных Лауа$ сир: Вам известны? 
Какие операторы сравнения имеются в ЈауаЅсгірѓ? 
Какие виды модальных окон Вам известны? Опишите соответ- 
ствующие им операторы. 

9. Опишите оператор условия в ЈауаЅсгірі 

10. Опишите операторы цикла в ЈауаЅсгірі 

11. Как и для чего используются функции Лауа5сирЕ? 

12. Для чего используются обработчики событий в Лауа5 сре? При- 
ведите примеры. 

13. Почему возникла необходимость в разработке дополнительных 
библиотек ЈауаЅсгірі? 

14. Перечислите основные возможности библиотеки уиегу 

15. Какие еще библиотеки ЈЅ вам известны? Самостоятельно изучите 
и проанализируйте их назначение и особенности. 

16. Поясните различия между ЈЅ-библиотекой и /5-фреймворком. 

17. Поясните сущность компонентного подхода, используемого 
фреймворком Веасе. 


ч Оло 9 
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Контрольные задания 


1. Измените текст страницы так, чтобы скрипт печатал все четные 
числа от 2 до 20. 


<Һем1> 
<Боду> 
<5сг1ре фуре = "{ех®/]ауа$сг1ре"> 
Іеї і = 0; 
Фог (1 = 9;1< = 5;1++) 
{ 
а1ег{ ("Число і равно 
} 
</5сг1ре> 
</Боау> 
</ћЕм1> 


+1); 


2. Добавьте на страницу функции и демонстрацию работы функций 
изменения содержимого абзаца (а не заголовка) при наведении на него 
мыши. 


<Һём1> 
<һеаа»> 
<5сг1рф уре = "+ехї/јамаѕсгірі" > 
Ғипс+іоп патеоп() 
{ 
аӢоситеп+ . ве®Е1етеп+Вута( 'Н2%ехе').1ппегНТМЕ = "ДОБРО 
ПОЖАЛОВАТЬ! "; 


} 
Ғипсёіоп патеои+() 
{ 
аоситеп. ве+Е1етепЁВуІа( 'һ2%ехі').іппеентмі = "Как 
дела сегодня?"; 
} 
</$сг1ре> 
</һеаа> 
<Боду> 
<һ2 іа = "И2%ехё" оптоиѕеои = "патеоиї()" оптоиѕеоуег = 


"патеоп() "> 
Переместите мышь над этим текстом! 
</һ2> 
</Боау> 
</ћЕт1> 


3. По приведенному примеру (вычисления площади прямоуголь- 
ного треугольника) составьте скрипт, который рассчитывает площадь 
круга и длину окружности по введенному радиусу. 


<ћЕт1> 


<һеаа»> 
<і+1е»>р1оѕһай</&і1е>» 
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<ѕсгірё буре = "+ех+/јамаѕсгірї" > 
Ғипс+іоп р1оѕһаа +г() 


{ 
а = Яоситеп. Ғогтѕ [ "#1" ] .е1етеп*$ ["К1"] .уа1ие; 
Ь = аоситеп* . Ғогтѕ[ "#1" ] .е1етеп*$ ["К2"] .уа1ие; 
аоситеп . ве+Е1етепВуІа( 'хё').іппегнтмі = 
"площадь "+а*6/2; 
а1егі(а*Ы); 
$ 
</ѕсрірЕ> 
</Неаа> 
<Боду> 
<Ғогт іа = "#1" пате = "+1"> 
<1приЕ бех = "ех" 14 = "к1" паме = "К1" /> 
<1приЕ бехі = "ехї" 14 = "К2" пате = "К2" /> 
<іприї уре = "биїтоп" уа1ие = "Отправить" опС11сК = 
"р1озПаа_+г();" /> 
</Ғогт> 
<р 14 = "іхі"> 
</Боау> 
</Нт1> 


4. Выполните предыдущее задание с использованием возможностей 
ЛОчегу. 

5. Создайте минигалерею, содержащую 6 любых изображений 
и подписей к ним с использованием НТМИ, «чистого» ЈауаЅсгірѓи Кеасї. 
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Тема 6 
ОСНОВЫ СЕРВЕРНОЙ ОБРАБОТКИ 
МЕВ-ПРИЛОЖЕНИЙ 


После изучения данного раздела студент должен: 

знать 

• основные возможности и область применения серверных языков 
программирования и языка РНР, 

• правила оформления кода на языке РНР, 

• типы переменных языка, особенности их применения и принципы 
преобразования, 

• особенности операций с различными типами данных в языке РНР, 

• особенности применения условных и циклических конструкций 
в языке РНР, 

• особенности работы с массивами, 

• правила описания и применения функций; 

уметь 

• составлять программы на языке РНР и использовать их совместно 
с кодом НТМІ., 

• применять переменные различных типов, встроенные функции 
языка, условные и циклические конструкции, массивы разных типов, 

• организовывать вывод данных на языке РНР с использованием 
структурирования на языке НТМГ; 

владеть 

• навыками настройки среды разработки серверных меБ-при- 
ложений с использованием одного из локальных уеђ-серверов и ин- 
струментов разработчика. 


6.1. Серверное программирование. 
Назначение и возможности РНР 


В предыдущих разделах данного учебного пособия мы разо- 
брали понятие клиент-серверного взаимодействия и выяснили, 
какие технологии, технические и языковые средства использу- 
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ются при работе меБ-приложений на стороне клиента. Далее 
речь пойдет о технологиях, которые используются на сервере. 
Считается, что для разработчика серверное программирование 
проще, чем клиентское, так как обработка запросов на сервере 
требует, как правило, довольно стандартных, однотипных опе- 
раций обращения к базе данных и формирования ответов. 

Важнейшей частью серверных технологий при организации 
међ-приложений является међ-сервер. МеЬ-сервером назы- 
вают как программное обеспечение, выполняющее функции 
обработки НТТР-запросов, поступающих от браузеров, так 
и непосредственно компьютер, на котором это программное 
обеспечение работает. 

В зависимости от функций приложения может понадобить- 
ся либо статический, либо динамический међ-сервер. 

Статический иеђ-сервер способен высылать ответы 
на НТТР-запросы в виде готовых статических страниц, которые 
размещены на нем. 

Динамический иеБ-сервер, в дополнение к возможностям 
статического, содержит программное обеспечение, которое 
способно отправлять запросы к базе данных (хранящейся на от- 
дельном сервере баз данных или встроенной в ме-сервер), 
обрабатывать эти запросы при необходимости и отправлять 
браузеру полученную информацию в составе НТМІ-страницы. 
Например, при работе с некоторым электронным магазином 
пользователь в ответ на свой запрос о некотором товаре полу- 
чит не готовую, хранящуюся на сервере, страницу об этом то- 
варе, а шаблон страницы товара, в которую встроены из базы 
данных (БД) сведения именно об этом товаре. 

Серверное программное обеспечение (сценарии), которое 
способно выполнять такие функции, пишется на одном из сер- 
верных языков иер-программирования. К этим языкам отно- 
сят: РНР, Руоп, Ка, М№оае.]Ј5, Јауа и др. 

Наиболее распространенные программы-мер-серверы, ко- 
торые способны «понимать» программы, написанные на этих 
языках — это Арасһе, Місгоѕоѓг Іпгегпеѓ шЮгтаНоп Ѕегүег, 
Меѓѕсаре и іРІапег. 

Для удобного создания, изменения и обработки динамиче- 
ски изменяющихся данных (списков пользователей, товаров, 
блогов и т. д.) используются системы управления базами дан- 
ных (СУБД). 

Далее мы будем рассматривать РНР — широко используе- 
мый язык серверных сценариев общего назначения с откры- 
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тым исходным кодом. Аббревиатура РНР означает «Нурегіехі 
Ргергосеѕѕог» (Препроцессор Гипертекста). Синтаксис языка 
очень похож на синтаксис С, поэтому язык довольно прост 
в изучении. РНР реализован для большинства операционных 
систем, включая Мпих, многие модификации Опіх (такие как 
НР-ОХ, 50]а!15 и ОрепВ$р), Місгоѕоќ Міпӣоугѕ, Мас 0$, КІЅС 05, 
и многих других. Также в РНР включена поддержка большин- 
ства современных међ-серверов. Еще одним значительным пре- 
имуществом РНР является поддержка широкого круга СУБД. 

Схема работы уеЬ-сервера Арасћһе со скриптом на РНР при- 
ведена на рис. 6.1. 








| НТТР-ответ | и Результат | 






“_ работы Ответ 501. 

©] программы С 

ЕЕ С НТТЬ. Трограм: Запрос 
АШЕР, Запрос 4 ма РНР 59. д 
Браузер М/еЪ-сервер 


Рис. 6.1. Серверная обработка међ-приложения 


Пользователь через браузер отправляет запрос к меВ- 
серверу по протоколу НТТР. М/еБ-сервер определяет, к какому 
типу файла было совершено обращение, и, если это файл с рас- 
ширением .рһр, то запрос передается на обработку интерпре- 
татору языка РНР, скрипт обрабатывается, выполняется, при 
необходимости запрашивает и получает некоторые сведения 
из базы данных и возвращает ответ мер-серверу. МеБ-сервер 
передает сформированный результат пользователю. Этот ре- 
зультат, как правило, представляет собой динамически сгене- 
рированную НТМІ-страницу. 

Скрипты на РНР могут встраиваться в код НТМІ-страницы 
(страница при этом должна получить расширение. рЮр) или за- 
писываться в отдельные скриптовые файлы, которые содержат 
только рһр-функции. 


6.2. Основы синтаксиса и типы переменных РНР 


Код заключается в специальные теги РНР <?рНр и ?>. 
Каждый оператор заканчивается точкой с запятой. 
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Оператор есһо, осуществляет вывод информации в браузер. 


<?РНР 
есһо 'Не110!'; 
?> 


Можно также для вывода информации на страницу исполь- 
зовать оператор ргіпє: 


<?РНР 
ргіпё 'Не11о!'; 
?> 


В РНР используют З типа комментариев. 


# Это однострочный комментарий 

// Это тоже однострочный комментарий 
/* А это 

длинный многострочный 

комментарий 


ТЕ 


Как и в других языках программирования, переменной на- 
зывается именованная область памяти, в которой содержатся 
данные. Имена переменных в РНР начинаются со знака долла- 
ра «$» и состоят из цифр, букв и знака подчеркивания. 

Примеры различных переменных в РНР: 


$мога 

$ту мога 
фмога24 
ФВЫСОТА 


Есть набор правил, которых нужно придерживаться при на- 
значении имен переменных: 

— в имя переменной буквы кириллицы могут входить как 
полностью, так и частично; 

— после знака доллара в имени переменной может идти 
только символ подчеркивания или буква; 

— переменные $уога и $уогр будут интерпретироваться 
как 2 разные переменные, то есть имена переменных в РНР — 
чувствительны к регистру; 

— имена переменных в РНР не должны совпадать с ключе- 
выми словами этого языка. Список ключевых слов можно уви- 
деть в официальной документации РНР; 

— длина имени переменной в РНР не ограничена. 
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В РНР существуют различные типы данных: 

— вещественные числа (Йоаг, геа]); 

— целые числа (и\иезег); 

— строки ($118); 

— логические величины (Бооіеап); 

— массивы (аггау); 

— обьекты (оБ]ес® и некоторые другие. 

РНР сам способен определять тип переменной, который 
он «узнает» исходя из данных, которые хранятся в переменной. 
Пример: 


<?рһр 

/* Сначала объявляем переменную, с одновременной инициализацией. 
Таким образом косвенно определятся ее тип - ТпЪедег*/ 

$питбег = 9; 

// Осуществляем операцию сложения 

$гези1* = фпитрег + 20; 

ргіпё $гези1{; 
?> 


РНР не требует явного указания типа при определении пере- 
менной; тип переменной определяется по контексту, в котором 
она используется. Это значит, что если вы присвоите значение 
типа те переменной $үаг, то $уаг изменит тип на ѕітіпе. Ес- 
ли вы затем присвоите $уаг значение типа іпѓевег, она станет 
целым числом (іпѓевег). 

Примером автоматического преобразования типа является 
оператор умножения (*). Если какой-либо из операндов явля- 
ется типом Поаѓ, то все операнды интерпретируются как Йоаї, 
и результатом также будет значение типа Ноа. 

Однако можно использовать и специальные функции при- 
ведения типов. Имя требуемого типа записывается в круглых 
скобках перед приводимой переменной. 


<?рһр 

$Нг$Е = 10; // $рг5Е - это целое число 

$ѕесопа = (Яоа*)$Яг5Е;//теперь $5есопа - это действительный тип 
?> 


Допускаются следующие функции приведения типов: 
— (шо, (іпіевег) — приведение к пцезег; 

— (Боо), (бооІеап) — приведение к БоФеап; 

— (Ноа®, (4ЧочЫе), (теа) — приведение к Ноаг; 
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— ($іпе) — приведение к Ѕїігіпе; 

— (аггау) — приведение к аггау. 

Если взять любое число и заключить его в кавычки, то дан- 
ная последовательность будет воспринята интерпретатором 
РНР как строка, а не как число. Важно понимать разницу меж- 
ду использованием двойных и одинарных кавычек в РНР, так 
как неправильный выбор кавычек в некоторых случаях может 
привести к неработоспособности мгер-приложения. 

Внутри двойных кавычек происходит интерпретация пере- 
менных, в результате чего на выходе мы получаем их значения. 

Внутри одинарных кавычек переменные не интерпретиру- 
ются, то есть строка пишется как есть. 


фпате = "Саша"; 
$зепепсе1 = "Его зовут $пате"; 
$ѕепёепсе2 = 'Его зовут $пате'; 


есһо $зепфепсе1; 
есһо $ѕепіепсе2; 


В первом случае мы получаем ответ «Его зовут Саша», 
а во втором — «Его зовут $пате». 

Мы не будем специально останавливаться на правилах ис- 
пользования арифметических операторов в РНР. Они практи- 
чески идентичны тем, которые были описаны для ЈауаЅсгірі 
в предыдущем разделе пособия. Но стоит оговориться по по- 
воду двух операций. Операция деления (/) возвращает число 
с плавающей точкой, кроме случая, когда оба значения явля- 
ются целыми числами, которые делятся нацело — в этом слу- 
чае возвращается целое значение. Для целочисленного деления 
дробных операндов нужно использовать іпёаіу(). При делении 
по модулю операнды преобразуются в целые числа (удалением 
дробной части) до начала операции. Для деления по модулю 
чисел с плавающей точкой нужно использовать ћтоа(). 

Со встроенными математическими функциями, которые ис- 
пользуются в РНР Вы можете ознакомиться по ссылке ВИр:// 
РНР.пес/тапиа1/ти/теЁ. та.РНР. 


6.3. Условные и циклические операторы в РНР 


В языке РНР есть несколько способов записи конструкции 
И. В самом простом способе і проверяет ложность или истин- 
ность определенного условия и в зависимости от результата 
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проверки выполняет или не выполняет группу выражений, раз- 
мещенных в фигурных скобках. 

В данном случае конструкция ! будет иметь следующий 
формат записи: 


<?рһр 
1+(какое-либо условие) { 
блок выражений 


} 


?> 
Пример: 


<?рһр 
$Ь = 5; 
1+($Ь < 19) { 
есһо $6 . "меньше десяти"; 


} 


?> 


В этом примере переменной $Ъ присваивается значение 5. 
Потом осуществляется сравнение 5 < 10. Как мы видим, оно 
истинно, поэтому заключенный в фигурные скобки код будет 
выполняться. В результате на экран будет выведена фраза: 
5 меньше десяти. 

Приведенный выше способ записи может быть усложнен 
с помощью команд е|зеЁ и е|5е. Синтаксис расширенного фор- 
мата следующий: 


<? рһр 
1+(какое-либо условие) { 
Блок выражений 1 


, 
е15е1+ (другое условие) { 
Альтернативный блок выражений 2 


е15е { 
Альтернативный блок выражений 3 


} 


?> 


Конструкция іЁ, как и любая другая условная конструкция, 
использует условные выражения, например $сһі10 > = 0. Это 
выражение истинно, если переменная $сһіѕ1о больше или рав- 
няется нулю. Операнды можно сопоставлять не только на ра- 


96 


Тодт: @й Ббооокѕ 


венство, но и на неравенство. Для этого используют оператор ! 
(поб). 

В РНР также можно объединять условные выражения в пре- 
делах одной конструкции. На практике довольно часто нужно 
проверить операнды на несколько соответствий. Например, уз- 
нать, входит ли число в диапазон чисел от 20 до 100. Для таких 
целей используются операторы ОК, АМ№Р. С их помощью услов- 
ные выражения можно комбинировать. 

Оператор ОК возвращает значение ТВОЕ, если хотя бы одно 
выражение является истинным. 

Оператор АХО возвращает значение ТВОЕ, если истинными 
одновременно будут оба выражения — слева и справа. 

Пример с оператором ОК: 


<?рһр 
$1оріп = "Вася"; 
//Теперь проверим, совпадает ли $109іп с одним из заданных логинов 
1#($10оріп == "Вася" ОВ $1оріп == "Маша") { 
есһо 'Логин правильный ' ; 


} 


е15е { 
есһо 'Вы ввели ошибочный логин’; 


} 


?> 


В данном примере оператор ОК используется для проверки 
строки (логина) на совпадение с одной из 2 строк. Выражение 
вернет ТВОЕ, если будет хотя бы одно совпадение. 

Пример с оператором АМП: 


<?рһр 
$6 = 15; 
// Проверяем, входит ли переменная $Ь в диапазон 10 < 3Ь < 100 
1+ ($6 > 10 АЮ $6 < 199) { 
есйо'$6 входит в диапазон'; 


} 
е1ѕе { 
есһћо'$6 не входит в диапазон’; 


} 


?> 


В этом примере выражение вернет значение ТВОЕ только 
в том случае, если значение переменной $Ъ одновременно бу- 
дет больше десяти и меньше 100. 
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Для управления порядком сравнения условных выражений, 
как вы возможно заметили в примере, их нужно заключать 
в круглые скобки. 

Следующая запись используется для проверки существова- 
ния той или иной переменной: 


<?рһр 
1+(1$6){ 
есһо 'Переменной $6 не существует'; 


} 


?> 


Но следует заметить, что для проверки существования пере- 
менных лучше использовать встроенную функцию РНР іѕѕеѓ(). 


<?рһр 
1+(15$5е%($6)) { 
есһо 'Такая переменная существует '; 


} 


е15е { 
есһо ‘такой переменной не существует '; 


} 


?> 


Функция етрѓу() используется для того, чтобы узнать, пусто 
ли значение переменной. Иногда переменная в РНР скрипте 
может быть установлена и функция іѕѕе{() вернет ТВОЕ, но зна- 
чение переменной будет пустым. Функция етрѓу() использует- 
ся для дополнительной проверки. Формат записи: 


<?рһр 
$Ь = ете 
іҒ(!етрїу(%6)) { 
есһо 'Значение переменной $6 не является пустым’; 


} 


?> 


Для повторения блока инструкций несколько раз в РНР, как 
и в других языках программирования, используются операто- 
ры цикла. В языке программирования РНР существует несколь- 
ко способов записи циклических конструкций: 

1) мһћіе; 

2) тоғ 

3) до... мћіе; 

4) Ғогеасһ. 
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Циклическую конструкцию итћіе используют в случаях, ког- 
да количество повторений неизвестно заранее. Повторение бу- 
дет выполняться до тех пор, пока условие цикла равняется ігие. 

Синтаксис цикла ућі]е: 


мһі1е (условие продолжения) { 
//блок команд 


, 
Пример цикла утћіе: 


<?рһр 
// Присваиваем переменной начальное значение 
$беріп = 0; 
// Устанавливаем предельное значение 
$епа = 9; 
// Начинаем цикл с условием 
мһі1е ($беріп < = $епа) { 
// Определяем номер итерации 
$іега+іоп = $Бев1т + 1; 
есһо "$ібегаіоп -я итерация<бг />"; 
// Обратите внимание!!! Здесь мы увеличиваем значение $ђедіп! 
$реріп++; 


} 


?> 


Данный скрипт выводит номера повторений цикла. Отсчет 
начинается со значения $Бееіп, которое устанавливается в пе- 
ред циклом. Потом переменная $епа определяет номер послед- 
ней итерации, на которой цикл останавливается. 

В отличие от цикла уе, цикл јог в основном используют 
для выражений с заранее известным количеством повторений. 
Но Юг отличается тем, что условие меняется в самой конструк- 
ции, а не снаружи или внутри блока скрипта. 

Синтаксис цикла Юг: 


+ог (инициализация; условие; приращение) 


{ 


//блок команд 


Т 
Пример использования цикла Юг: 
<?рһр 
Ғог ($беріп = Ө, $епа = 9; $реріп < = $епа; $беріп++) { 


// Присваиваем номер итерации 
$іїбегатіоп = $6е21п+1; 
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есһо "$ібегаіоп -я итерация<6г />"; 


} 


?> 


Во время первого прохода данной циклической конструк- 
ции инициализируются переменные $Безш и $епа: они полу- 
чают значения 0 и 9. Потом интерпретатор проверяет истин- 
ность условия цикла. Конечно, 0 < 9, поэтому блок кода внутри 
цикла Юг выполняется, а $Бееіп увеличивается на 1. После вы- 
вода есһо условие цикла проверяется снова. В этот раз пере- 
менная $Безшт = 1, что меньше 9, поэтому цикл продолжает 
выполняться. Когда значение $Бееіп = 10, условие $Безш < = 
$епа оказывается ложным (Ё[5е) и цикл заканчивается. 

Циклическая конструкция 40...и’ЙИе очень похожа на цикл 
уе. Отличается тем, что условие проверяется не в начале, 
а в конце выполнения каждого прохода тела цикла. Таким об- 
разом, всегда существует одна обязательная итерация. 

Пример: 


<?рһр 
$Бер1т = 0; 
$епа = 19; 
до { 
есһо $Беё1п; 


} 
мһі1е(%беріп> = $епа); 
?> 


Так как выражение 0 > = 10 является ложным, условие цик- 
ла должно вернуть значение ѓа[ѕе. Однако, как было замечено 
раньше, одна итерация данного цикла выполняется всегда. По- 
этому на экране в результате выполнения скрипта появится 
значение переменной $Безтп, а именно, 0. 


6.4. Массивы в РНР 


Массив — это организованная совокупность ячеек памяти, 
хранящих данные под одним именем. Массив может одновре- 
менно содержать несколько элементов (значений). Элементы 
массивов идентифицируются по их индексам (ключам). Любой 
массив состоит из одной или нескольких пар «ключ — значение». 

Простым примером массива может быть обычное слово. Все 
строковые данные в РНР можно представить в виде массива. 
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Например, слово «программа» — это массив, который включа- 
ет девять элементов. Для обращения к элементу массива нуж- 
но указать его индекс. В языке программирования РНР, как 
и во многих других языках, индексация начинается с 0. Индекс 
первого элемента массива (в нашем случае это буква «п») будет 
равняться нулю. 

Пример: 


<?рһр 

$мога = "программа"; 

есһо $мога[9]; 

// на экран будет Выведена буква "п" 

// в примере ключ элемента - Ө, значение элемента - "п". 
?> 


Массив можно создать с помощью конструкции аггау(). Эта 
конструкция позволяет создавать пустой массив: 


<?рһр 
тоу таѕѕіу = аггау(); 
?> 


или массив с некоторыми элементами: 


<?рһр 
фтоу таѕѕім = аггау("10", "20"); 
?> 


До сих пор мы говорили про одномерные массивы. Массив 
в таком случае имеет очень простую структуру: «ключ => зна- 
чение». 

Но часто приходится иметь дело с более сложными струк- 
турами данных. Хорошим примером многомерных данных 
может быть список зарегистрированных пользователей сайта. 
В массиве данных хранится информация не только о логине 
и пароле, но и другая частная информация о пользователях. 
Многомерные массивы используются для описания именно та- 
ких структур. 

У многомерного массива каждый элемент имеет не менее 
двух индексов. Это достигается за счет того, что в РНР элемен- 
том массива может выступать любой тип данных, и другой мас- 
сив в том числе. Создаются своего рода «массивы массивов». 
Для примера рассмотрим многомерный массив пользователей 
сайта: 
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<?рһр 
$ро170\а{е11 = аггау ( 
Ө => аггау ( 
"Іоріп" => "Аатіп", 
"раѕма" => "аатіп', 
"ета11" => "аатіп@та1і1. ги", 
"рготеѕѕіоп" => "РНР программист" 


1 => аггау ( 
"Іоріп" => "Ѕаѕһа", 
"раѕма" => "Ѕаѕһа1", 
"ета11" => "а1ех@таі1. ги", 
"рготеѕѕіоп" => "инженер" 


2 => аггау ( 
"Іоріп" => "Реїг", 
"раѕма" => "Реёг1", 
"ета11" => "реїг@таі1. ги", 
"рготеѕѕіоп" => "35 программист" 


) 
08 


?> 


Для доступа к элементам многомерного массива индексы за- 
писывают сразу после предыдущих в квадратных скобках. Если 
добавить к вышеприведенному коду такую строку: 


есһо $ро170\а%е11 [1] ["ргоҒеѕѕіоп"]; 


то мы получим профессию пользователя — инженер. 

Многомерные массивы делятся на: 

1) индексные (ключами массивов выступают целочислен- 
ные значения); 

2) ассоциативные (ключами являются исключительно 
строковые данные); 

3) смешанные (логично, что здесь ключами могут быть как 
целые числа, так и строковые величины). 

Как видите, в данном примере рассматривался смешанный 
многомерный массив. 

При работе с массивами в языке программирования РНР 
множество задач решается с помощью перебора их элементов. 
Для этого используют рассмотренные в прошлых уроках цикли- 
ческие конструкции (Юг, мће...) или конструкцию јогеасћ, 
которая была специально создана для работы с массивами. 

Сравним программы для перебора элементов некоторого 
массива, созданных с использованием традиционного цикла 
(оператор уће) и цикла, с использованием оператора Ёогеасһ. 
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<?рһр 
$рогойа = аггау ( "Москва", "Курск", "Вологда"); 
$1паех = 9; 
$е1етепіѕ = соипё ($вогода); 
мһі1е ($1п4ех < $е1етеп+ѕ) { 
есһо $1п4ех+1 . "." . $вогода[$1пдех] . "<6г>"; 
$1паех++; 


} 


?> 


В результате работы этого скрипта мы увидим на экране сле- 
дующую информацию: 


1. Курск. 
2. Вологда. 
3. Москва. 


В начале создается массив $еото4а с 3 элементами: 

$еого4а [0] = «Курск», 

$гого4а [1] = «Вологда», 

феогоа [2] = «Москва». 

Потом инициализируются 2 переменные: $іпӣех и $ејетепіѕ. 
Первая выступает ключом (индексом) для последующего об- 
ращения внутри цикла к элементам массива. Эта переменная 
получает значение 0, так как индексация массивов в РНР на- 
чинается с нуля. 

Переменная $ејетепіѕ получает значение, которое верну- 
ла встроенная функция соипі(). Встроенная функция соипќ() 
возвращает количество элементов массива, имя которого за- 
дается в аргументе. В примере 3 элемента, поэтому значение 
феІетепіѕ будет равняться трем. 

Итерация в цикле согласно условию выполняется до тех пор, 
пока индекс элементов не будет равняться максимальному ко- 
личеству элементов в перебираемом массиве (не забываем, что 
переменная $таех равна нулю, а не единице, поэтому в опера- 
торе сравнения стоит знак <, а не <= ). На экран при помо- 
щи команды есһо выводится результат операции конкатенации 
(сцепления строк). В конце выполняется инкремент (увели- 
чение переменной $т4ех на единицу). Не следует забывать 
об этом шаге, так как он позволяет работать с последующими 
элементами массива и обеспечивает прекращение работы цик- 
ла, когда заданное условие выполнено. 

Такой же результат можно получить с использованием опе- 
ратора Ёогеасћ: 
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<?рһр 
$вогода = аггау ( "Москва", "Курск", "Вологда"); 
$1паех=1; 
Ғогеасһ ($Рогода аз $уа1ие){ 
есһо фіпаех . "." . фуа1ие . "<6г>"; 
$1паех++; 


} 


?> 


Здесь оператор ѓогеасһ указывает, что нужно выполнить те- 
ло цикла для каждого значения ($уае), входящего в массив. 

Еще более эфективно использование этого оператора цикла 
для ассоциативных массивов. В данном случае мы можем сразу 
обращаться ко всем входящим в ассоциативный массив парам 
ключ ($Кеу) — значение ($уаше): 


<?рһр 
$вогода = аггау (1=>"Москва", 2=>"Курск", 3=>"Вологда"); 


Ғогеасһ ($гого4а аз $Кеу=>$уа1ие){ 
есһо $Кеу . "." . $уа1ие . "<6г>"; 


} 


?> 


Таким образом, язык РНР позволяет организовать достаточ- 
но сложные структуры данных и эффективно их обрабатывать. 


6.5. Функции РНР 


Функция — это некоторый набор команд, как правило, реали- 
зующих какую-либо законченную задачу, который хранится под 
некоторым именем. Основная задача создания функций — это 
организация программы таким образом, чтобы правильно рабо- 
тающий код можно было многократно использовать, не изменяя 
и не создавая снова. То есть та часть программы, которая может 
понадобиться снова, записывается в виде функции и по мере не- 
обходимости просто вызывается, через указание ее имени. 

Существуют два типа функций: встроенные и пользователь- 
ские. Встроенные функции — это функции, которые за нас уже 
написали создатели языка программирования, и мы можем 
просто их использовать. В РНР существуют тысячи готовых 
функций, которые вы можете найти в различных источниках!. 


1 См. напр.: ћрѕ://15(-пегуогКк.ги/ргоғ /іп-Ғипсіопѕ 
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Далее мы будем рассматривать только пользовательские 
функции. 
Общая схема описания функции РНР такова: 


<?рһр 
Ғипсёїіоп <имя функции> (<аргумент функции») { 
<тело функции» 
геигп <результат выполнения функции»; 
} 
Так, например, пусть нам необходимо выяснить, является 
ли пользователь совершеннолетним: 


<?рһр 
Ғипсёіоп 15 уеаг($уеаг) { 
1+ ($уеаг >16) { 
гефигпт гие; 


} 
е1ѕе { 
гефигп Ға1ѕе; 


} 
} 


Мы описали функцию с именем іѕ_уеаг, которая принимает 
в качестве аргумента значение $уеаг (например, возраст поль- 
зователя) и возвращает логическое значение (гие, если возраст 
больше 16 лет, и #а|5е — в противном случае. 

В нужном месте программы эта функция может быть вызвана: 


<?рһр 
$уеаг = 15; 


1+ (15 уеаг(Фуеаг)) { 
ргіп ("Вы совершеннолетний"); 


} 


е15е { 
рг1пЕ ("Вы-несовершеннолетний"); 


} 


?> 


Таким образом, нами были рассмотрены наиболее общие 
принципы и методы применения языка РНР. Далее будут рас- 
смотрены возможности работы на РНР с базами данных. 


Контрольные вопросы 


1. Назовите основные возможности языка РНР. Для решения каких 
задач он обычно применяется? 


105 


Тодт: @й Ббооокѕ 


2. Как оформляется код на РНР? Какое расширение должен иметь 
файл, содержащий такой код? 

3. Какого типа переменные используются в РНР? Как описывается 
тип переменных? 

4. Каковы особенности использования кавычек в РНР? 

5. Каковы основные арифметические операции в РНР? 

6. Опишите синтаксис условного оператора в РНР. Приведите при- 
меры. 

7. Какие основные логические операторы, используемые в РНР 
вам известны? 

8. В чем состоит назначение и какой синтаксис оператора ућіе? 
Приведите примеры. 

9. В чем состоит назначение и какой синтаксис оператора ог? 
Приведите примеры. 

10. В чем состоит назначение и какой синтаксис оператора о... 
ме? Приведите примеры. 

11. В чем состоит назначение массивов в языке РНР. Какие типы 
массивов в нем используются? Приведите примеры. 

12. В чем состоит назначение и каков принцип использования опе- 
ратора огеасВ? 

13.Для чего используются функции языка РНР? Приведите пример. 


Контрольные задания 


Используя инструкцию по установке м’ер-сервера, приведен- 
ную в практикуме данного учебного пособия, настройте среду 
выполнения программ на языке РНР и решите следующие за- 
дачи. 

1. Создайте переменные $с = 15 и $4 = 2. Просуммируйте их, 
а результат присвойте переменной $геѕшї. Выведите на экран значение 
переменной $геѕиії. 

2. Создайте переменную $уога и присвойте ей значение ТеПо’. 
Обращаясь к отдельным символам этой строки выведите на экран 
символ Ф”, символ ‘е’, символ ‘О’. 

3. Создайте ассоциативный массив $агг, содержащий сведения 
о пяти сотрудниках и их зарплатах. Выведите на экран зарплату двух 
сотрудникова. 

4. Выведите в НТМГ-таблицу все значения ассоциативного массива, 
созданного в предыдущем задании. 

5. Выведите каждый из элементов некоторого массива шрифтом 
разного стиля. 

6. Выведите меньшее из трех введенных в переменные чисел. 

7. Если целое число а делится нацело на целое число Б, выведите 
результат, если нет — выведите сообщение об этом. 
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8. Известны две скорости: одна в километрах в час, другая в метрах 
в секунду. Выведите ту, которая больше. 

9. Дано двузначное число. Определите, какая из двух его цифр 
больше и выведите сообщение об этом. 

10. Пользователь вводит логин и пароль. Если они совпадают с не- 
которыми известными программе значениями, выведите приветствие, 
иначе — предложите ввести логин и пароль заново. 
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Тема 7 
ПРИМЕНЕНИЕ РНР ДЛЯ РАБОТЫ 
С БАЗОЙ ДАННЫХ 


После изучения данного раздела студент должен: 

знать 

• место и роль баз данных и СУБД в разработке меБ-приложений, 

преимущества использования баз данных при создании динами- 
ческих приложений, 

• наиболее используемые при разработке меБ-приложений СУБД, 

• основы языка 501, 

• возможности и принципы обмена данными между приложением 
и базой данных, 

• возможности языка РНР по обращению к базам данных и пред- 
ставлению полученной информации на меБ-странице; 

уметь 

• создавать простую реляционную базу данных в среде одной 
из СУБД, 

• писать несложные запросы к базе данных на языке 501, 

• описывать команды выполнения запросов вставки, удаления 
и обновления к базе данных средствами языка РНР, 

• организовывать вывод данных запроса на м’еБ-страницу; 

владеть 

навыками использования СУБД для создания структуры, запол- 
нения и просмотра баз данных, 

подключения к базе данных на языке РНР, 

• отладки программ и использования механизмов поиска ошибок 
программного выполнения запросов к базе данных на языке РНР. 


7.1. Зачем использовать базы данных 
в мер-разработке 


Работа с базами данных — это одна из важнейших состав- 
ляющих программирования сайтов динамического типа. Будь 


108 


Тодт: @й Ббооокѕ 


то формирование страниц «на лету» или же реагирование 
на действия посетителей сайтов — почти все эти задачи требу- 
ют взаимодействия с базами данных. 

Базы данных (БД) для сайтов используются с целью хране- 
ния различной информации и, упрощенно, представляют со- 
бой некоторый набор взаимосвязанных таблиц. Именно в ба- 
зах данных хранится на сервере требуемая для работы сайта 
информация, например, информация о клиентах, каталог то- 
варов, статистические данные и т. д. 

Управление БД как правило, осуществляется при помо- 
щи клиент-серверных СУБД, таких как Ога е, М5 501. $егуег, 
Роз{етеЗ ОГ, МуѕЅ01І. и др. Клиент-серверные СУБД обрабаты- 
вают запросы централизованно, к их достоинствам относят 
обеспечение высокой надежности баз данных, их доступности 
и безопасности. 

Для построения запросов к базам данных широко приме- 
няется 501. (5{тисёигеа Оиегу Гапзиазе) — «язык структуриро- 
ванных запросов». С помощью 5ОТ может осуществляться до- 
бавление, удаление, редактирование записей в таблицах БД, 
выборка данных в соответствии с различными условиями, со- 
ртировка данных и многое другое. 

Язык РНР для создания меБ-приложений обычно применяют 
в связке с СУБД МУ5ОГ, хотя на нем можно писать программы, 
которые работают с базами данных, управляемыми и другими 
СУБД. 

В практической части данного курса мы будем реализовы- 
вать клиент-серверное взаимодействие с применением пакета 
разработчика Ореп$егуег, который позволяет создавать и от- 
лаживать свои уеђ-приложения локально. Этот пакет поддер- 
живает множество уеЬ-серверов, среди которых Арасће, №іпх, 
почтовых и ОМ№5-серверов, несколько различных реляционных 
и нереляционных СУБД, РНР самых последних версий. 


7.2. Основы СУБД Му50Е 


Му5ОГ, — это система управления реляционными базами 
данных. Это означает, что данные в таких базах хранятся в от- 
дельных таблицах, которые связываются между собой. Этот 
способ хранения данных обеспечивает с одной стороны мини- 
мальную избыточность данных, а, с другой, эффективное вы- 
полнение любых типов запросов на поиск информации. 
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База данных состоит из таблиц, а каждая таблица состоит 
из строк (записей). Один сервер Му5ОГ может поддерживать 
сразу несколько баз данных, доступ к которым может разграни- 
чиваться логином и паролем. Зная эти логин и пароль, можно 
работать с конкретной базой данных. Например, можно соз- 
дать или удалить в ней таблицу, добавить записи и т. д. Обыч- 
но имя-идентификатор и пароль назначаются хостинг-провай- 
дерами, которые и обеспечивают поддержку Муѕ0І. для своих 
пользователей. 

Существует несколько способов создания новой базы дан- 
ных Му5ОГ: 

— через запросы на языке 501. 

— через интерфейс, предоставляемый СУБД. В нашем слу- 
чае это средство называется РНРМУуАатіп. 

Первый способ требует достаточно глубоких знаний в тео- 
рии баз данных, поэтому в рамках данного курса ограничимся 
вторым способом. 

Для создания базы данных в среде РНРМуА4тт необходимо 
выполнить следующие шаги: 

1) создать пустую базу данных; 

2) создать пустую таблицу в этой базе данных; 

3) описать структуру этой таблицы (набор столбцов); 

4) ввести конкретные данные в эту таблицу; 

5) если база данных должна состоять из нескольких таблиц, 
то необходимо повторить пункты 2—4 для каждой таблицы. 

Описание структуры (набора столбцов) требует задания 
следующей информации: имя столбца, тип столбца, информа- 
ция о ключах, значение по умолчанию (при необходимости). 

При определении имени столбца необходимо помнить лишь 
то, что имя не должно содержать пробелов и должно быть со- 
держательно понятным, например сепа _ѓоуага (Цена товара) 

Наиболее часто встречающиеся типы данных приведены 
в табл. 7.1. 

Таблица 7.1. 


Типы данных СУБД Муѕ0І 


Название Описание, диапазон 
в Му5ОТ, возможных значений 





ПМТ —2 147 483 648 - 2 147 483 647 


Веществен- Небольшая точность 


М РЕСМАТ | Дробное число, хранящееся в виде строки 
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Окончание табл. 7.1 


Описание, диапазон 
возможных значений 


Строка длиной до 255 символов 


Название 
в МУу5ОТ, 


СНАК 
УАКСНАК 


Символь- 
НЫЙ 





Строка длиной до 255 символов (обрезает- 
ся до реального размера +1 символ) 


Строка Текст с максимальной длиной 65 535 сим- 


волов (64 Кб) 
Дата в формате ГГГ-ММ-ДД 
Время в формате ЧЧ:ММ:СС 


Дата и время в формате ГГГГ-ММ-ДД 
ЧЧ:ММ:СС 





Дата 
и время 








РАТЕТІМЕ 








Каждая таблица должна иметь ключевой столбец. Он содер- 
жит данные, которые однозначно определяют другие данные 
в этой строке таблицы. Примером ключевого столбца может 
быть библиотечный код книги или номер студенческого билета 
студента. 

Приведем пример описания структуры таблицы для реали- 
зации базы данных в среде СУБД МуѕоОІ (табл. 7.2). 


Имя 
столбца 


Тип 
столбца 


Таблица 7.2 
Таблица Кпіді 


Сведения Пояснения 


о ключах 





ЫЫ Коа 


пате Кпіеі 


УАКСНАК 


УАКСНАК 


Первич- библиотечный код 


ный ключ 


название 





амог 


УАКСНАК 


автор 





воа іла 
іг аӢаѓе]ѕ(уо 


Ко] ѕітапіс 


ІЧТ 
УАКСНАК 
ІЧТ 


год издания 


количество страниц 





сепа 


аага _ 
уіаӢасһі 


РЕСІМАТ. 


цена книги 


дата выдачи книги 
читателю 





аппоѓасіа 








краткое содержа- 
ние 








111 


Тодт: @й Ббооокѕ 


В реальных базах данных таблицу с такой структурой ис- 
пользовать нежелательно, она не соответствует многим прави- 
лам проектирования промышленных баз данных и использует- 
ся здесь только в качестве иллюстрации описания всех типов 
полей таблиц Му$01.. 

После описания такой структуры таблицы РНРМУуАатіп 
предложит пользователю пустую форму с окнами, в которые 
можно будет вводить строки таблицы с конкретными сведени- 
ями о книгах. 


7.3. Некоторые возможности языка манипулирования 
данными 501 для работы с базами данных 


В данном курсе мы изучаем технологии баз данных для то- 
го, чтобы уметь сохранять данные, введенные на сайте, в ба- 
зе данных на сервере, а затем, при необходимости, выводить 
их на страницах сайта. Поэтому нам важно выяснить, как мож- 
но манипулировать данными из БД программно, из РНР скрип- 
ТОВ. 

На самом деле РНР только создает интерфейс для запросов 
к базе данных, а сами запросы пишутся на языке 501. Струк- 
турированный язык запросов 501. позволяет производить раз- 
личные операции с базами данных: создавать таблицы, поме- 
щать в них новые данные, обновлять, удалять из них данные, 
отбирать нужные сведения из таблиц и т. д. Далее рассмотрим 
основные из этих операторов, что позволит понять основные 
принципы работы с базой данных в мер-программировании. 


| Примечание | 


Команды $01 не чувствительны к регистру, но традиционно они 
набираются прописными буквами. 


Рассмотрим базу данных «Книги», состоящую из одной та- 
блицы Кпіеі, описанной в предыдущем разделе. 

Добавление данных в таблицу Му$ОГ.. Для добавления за- 
писей используется оператор ІМЅЕКТ: 


ІМЅЕАТ ТМТО Имя таблицы [(Список полей)] \МАЕИЕ$ (Список констант) 


После выполнения оператора ІМЅЕВТ будет создана новая 
строка таблицы, в качестве значений полей будут исполь- 
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зованы соответствующие константы, указанные в списке 
УА1ЏЕЅ. 
Рассмотрим пример использование оператора ІЧЅЕКТ. 


ІМЅЕАТ ІМТО Кп1е1 МА0ЕЅ ('В3498-43', 'Горе от ума', 
"А. С. Грибоедов', 1996, 'Детская литература’, 
354, 20.50, 2016:01:02, 'Пьеса в стихах’) 


Добавляемые значения должны соответствовать тому поряд- 
ку, в котором поля хранятся в таблице. Если вы хотите добав- 
лять информацию в другом порядке, то вы должны указать этот 
порядок в операторе ІЧЅЕКТ, например: 


ІМЅЕАТ ТМТО Кпірі (6161 Коа, пате_Кп121, ау+ог, роа іга, 
ігаӢаёе151уо, Ко1 ѕігапіс, сепа, аа уідасһі, аппоёасіа) \МАГУЕ$ 
('В3498-43', 'Горе от ума", 'А. С. Грибоедов', 1996, 'Детская 
литература", 354, 20.50, 2016:01:02, 'Пьеса в стихах’) 


С помощью ІЧЅЕВТ можно добавлять данные в отдельные 
поля, но только в том случае, если при создании таблицы 
в остальных полях предусмотрена возможность оставлять пу- 
стые (нулевые) значения. Иначе, этот запрос выдаст ошибку. 

Другая распространенная ошибка связана с попыткой вста- 
вить в таблицу новые данные с таким же первичным ключом, 
который уже имеется в ней. 

Извлечение данных из таблиц Му$ ОТ. Для извлечения за- 
писей из базы данных в 501 используется оператор ЗЕЁЕСТ. 
Он имеет очень много возможностей, но в нашем простейшем 
случае, когда используется только одна таблица, мы ограни- 
чимся только возможностью выводить всю информацию из та- 
блицы или фильтровать информацию в зависимости от какого- 
либо условия. 

Получить все данные из таблицы: 


ЗЕГЕСТ * РЕКОМ Кпірі 


Получить данные о всех названиях и авторах книг из табли- 
цы Кпіеі: 


ЗЕЁЕСТ пате Кпірі, ауог ЕВОМ Кп11 
Получить все сведения о книгах автора А. С. Грибоедов 


ЅЕГЕСТ * ЕКОМ Кпірі МНЕКЕ ауёог = 'А. С. Грибоедов" 
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Получить все сведения о книгах автора Грибоедов, если 
мы не помним его инициалов: 


ЅЕГЕСТ * ЕКОМ Кпірі МНЕВЕ ауёог 1ТКЕ '%Грибоедовя' 


Получить все сведения о книгах, изданных в период с 1950 
по 1970 гг.: 


ЗЕЁЕСТ * ЕАОМ Кпірі МНЕКЕ роа 12а ВЕТМЕЕМ 1950 АМО 1970 


Получить все сведения о книгах Грибоедова, изданных в пе- 
риод с 1950 по 1970 годы: 


ЗЕЁБЕСТ * РЕКОМ Кпірі 
МНЕВЕ (204_17а ВЕТМЕЕМ 1950 АМО 1970) 
АМО (ауог ІКЕ 'ЖГрибоедов%') 


Изменение данных в таблицах. Синтаксис оператора 
ОРР”АТЕ, который используется для обновления записей, вы- 
глядит так: 


ОРРАТЕ Имя таблицы ЅЕТ Поле1 = Значение1, ... , 
Полећ = Значением№ [МНЕКЕ Условие] 


Если не задано условие У/НЕВЕ, будет модифицирована вся 
таблица, а это может повлечь за собой непредсказуемые по- 
следствия, поскольку для всех записей будут установлены оди- 
наковые значения полей, поэтому, практически всегда нужно 
указывать условие М/НЕКЕ. 

Предположим, нам необходимо обновить записи о книгах, 
изданных до 2000 года, снизив их цену на 10 %. 

Запрос выглядит так: 


ОРР”АТЕ Кпірі ЅЕТ сепа = сепа*0.9 МНЕВЕ роа іха < 2000 


Данный запрос нужно понимать так: найти запись (или запи- 
си), значение поля воа 17а которой меньше 2000, и установить 
значение сепа в ней меньше на 10 %. 

Удаление данных из таблиц. Для удаления строк из таблиц 
в 501. используется оператор ”РЕГЕТЕ. 

Если нам необходимо удалить все данные о книгах, издан- 
ных в издательстве «Детская литература», необходимо указать: 


РЕГЕТЕ РЕКОМ Кпірі МНЕКЕ 1іғ2дӢа+е15+мо = 'Детская литература’ 
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7.4. Функции РНР для работы с Муѕ0і 


Рассмотрим основные функции РНР, применяемые для рабо- 
ты с базой данных Муѕ0]І. 


7.4.1. Функции соединения с сервером МУ5ОТ, 
и базой данных 

Здесь предлагается использовать Му5011 (Му5ОГ Ітртгоу- 
еа) — расширение драйвера реляционных СУБД, используемо- 
го в языке программирования РНР для предоставления доступа 
к базам данных Му$01.. Му$011 является обновленной версией 
драйвера РНР МУЗОТ, и обеспечивает различные улучшения 
в работе с базами данных. Это расширение основано на объ- 
ектно-ориентированном подходе и использует основной класс 
для работы с БД — туѕаіі. 

Для создания соединения с БД нужно создать новый объект 
класса туза: 


/*Указываем имя сервера — [оса[по5®, имя пользователя базы дан- 
ных - ту _изег, пароль пользователя БД - ту раѕѕмоға, имя базы 
данных - ту аб */ 


$туза11 = пем ту$а11 ( 
'"Іоса1һоѕї', ‘ту иѕег', 
'ту раѕѕмога', ' ту аб'); 


// Выполняем обработку ошибки подключения к базе данных 
1+ ($туза11->соппес*_еггог) { 

аіе(' СоппесЕ Еггог ('.$ту$4911->соппес&_еггпо. ') '.$туза11- 
>соппес*_ еггог); 


} 


С помощью $ту5ай- > соппесі егтпо и $туѕд11- > соппесі еггог 
мы получаем описание и код ошибки, возникших при соеди- 
нении. 


Для закрытия соединения предназначена функция тузаП_ 
сІоѕе(Фсоппесіоп 14). 


$туѕ911і->с1оѕе(); 


7.4.2. Функции выполнения запросов 
к серверу баз данных 


Все запросы к текущей базе данных отправляются функцией 
тузай->диегу0. Этой функции нужно передать текст запроса. 
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Текст запроса модет содержать пробельные символы и симво- 
лы новой строки (\п). Текст должен быть составлен по прави- 
лам синтаксиса 501. 

Пример запроса: 


фгеѕи1Ё ѕеё = $туѕа11->диегу('ЅЕІЕСТ * ЕВОМ иѕегѕ'); 


Приведенный запрос должен вернуть все содержимое табли- 
цы иѕегѕ. Результат запроса присваивается переменной $тези Е _ 
5еЕ. Результат — это набор данных, который после выполнения 
запроса нужно обработать определенным образом. 

Другой пример запроса: 


$гези1+ ѕе1 = $ту$911->ачегу ( 
"ТМЗЕВТ ІМТО иѕегѕ (1оріп,раѕѕ,етаі1) 
\МАГОЕЗ ( '$1оріп', '$раѕѕмога', '$ета11')"); 


позволяет вставить данные в строку таблицы пѕегѕ. 


7.4.3. Функции обработки результатов запроса 


Если запрос, выполненный с помощью функции туѕд!і- 
>аиегу() успешно выполнился, то в результате клиент получит 
набор записей, который может быть обработан следующими 
методами: 

— $тези->}есй_тгом’() получает текущий ряд результата 
в виде нумерованного массива, 

— $геѕші- > јеісћ_аѕѕос() — в виде ассоциативного массива, 

— $геѕші- > јеісћ_ агтау() — тип массива задается константой. 

В следующем примере был получен результат — все содер- 
жимое таблицы иѕегѕ, затем он помещен в ассоциативный мас- 
сив, и по каждой строке этого массива были выведены иден- 
тификационный номер, логин и пароль пользователя. Ключи 
в этом случае совпадают с именами полей в таблице иѕегѕ. 


фгеѕи1ї ѕе = $туза11->ачцегу('5ЕЁЕСТ * РЕКОМ иѕегѕ'); 
мһі1е ($гом = $геѕи1 ѕеъ->Ғеёсһ аѕѕос()) 
{ 
есһо $гом[1іа]; 
есһо '<р»>'"; 
есһо $гом[1081п]; 
есһо '<р>"; 
есһо $гом[раѕ5]; 
есһо '<р>'"; 
$\аг = $уаг + 1; 
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Еще один пример использования интерфейса к базе данных 
с применением тузай приведен ниже. 


<?рһр 
/* Подключение к серверу Му50Е */ 
ту$911 = пем туѕ911('1Іоса1һоѕЇ', 'иѕег', 'раѕѕмога', 'мог14'); 
1+ (ту$а11_соппес*_еггпо()) { 
рг1пЕ( 
"Подключение к серверу МуѕЅ01 невозможно. Код ошибки: #5\п", 
птуѕ911 соппес_еггог()); 
ехії; 
} 
/* Посылаем запрос серверу */ 
1+ ($геѕи1+ = $ту$4911->дчегу( 'ЗЕТЕСТ Мате, Рори1а1оп ЕКОМ Сіжу)) { 
рг1пЕ ("Население городов: \п"); 
/* Выбираем результаты запроса: */ 
мһі1е( $гом = $гези1{->Рефсй_ аѕѕос() ){ 


есһо $гош['Мате'] . ":" . $гом['Рори1аіоп'] . "<6г>"; 


/* Освобождаем память */ 
$ге5и1+->с105е(); 


} 


/* Закрываем соединение */ 
$туѕ911і->с1оѕе(); 
?> 


Таким образом, становится понятно, как РНР позволяет вза- 
имодействовать с базой данных. 

Необходимо отметить, что современные тенденции М/еђ- 
разработки предполагают, что вывод результатов запросов к ба- 
зе данных на страницу выполняется не на сервере, а на клиен- 
те. То есть лучшие практики используют технологии, которые 
позволяют представлять результат обработки пользователю 
в браузере следующим образом: 

1) на сервере размещен специальный сервис, который по- 
зволяет, с использованием одного из серверных языков про- 
граммирования (например, РНР), выполнять определенный 
запрос к базе данных и результат этого запроса сохранять 
в специальном текстовом формате, например, /$О0М; 

2) браузер загружает присланную с сервера страницу, при 
необходимости отобразить результат запроса обращается к со- 
ответствующему сервису, получает данные в формате ЈЅОМ 
и размещает (иногда говорят «отрисовывает») их на странице 
с использованием ЈауаЅсгірі или более удобных его библиотек 
и фреймворков, таких как Кеасї. 

Этот подход будет нами отработан в практической работе 
№9. 
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Контрольн ые вопросы 


1. Для чего используются базы данных при создании сайтов? Какие 
преимущества этой технологии хранения данных вы можете назвать? 

2. Что такое СУБД? Какие СУБД Вам известны? Какая СУБД наи- 
более часто применяется для сайтов, написанных на РНР? 

3. Как вы представляете себе базу данных МузОГ? 

4. Какие этапы включает процесс создания базы данных Му ОТ? 

5. Какие типы могут иметь столбцы таблицы базы данных Му ОТ? 

6. Какой язык применяется для получения информации из базы 
данных или изменения данных в ней? 

7. Как организовать 501 запрос для вставки новых строк в таблицу 
БД? Приведите пример. 

8. Как организовать 501 запрос для поиска строк в таблице БД? 
Приведите пример. 

9. Как организовать 501. запрос для обновления строк в таблице 
БД? Приведите пример. 

10. Как организовать 501. запрос для удаления строк в таблице БД? 
Приведите пример. 

11. Опишите функцию подключения к БД Му$ ОТ, из программы РНР. 

12. Опишите функцию выполнения запросов к БД Му5ОГ из про- 
граммы РНР. 

13. Опишите функции обработки результатов запроса к БД Му$ОТ, 
из программы РНР. 

14. В чем суть использования технологий клиенской обработки за- 
просов к базе данных? 


Контрольные задания 


1. Опишите структуру таблицы БД, которая хранит сведения о ста- 
тье: идентификационный номер статьи, автор статьи, название статьи, 
дата создания статьи, содержание статьи. 

2. Опишите таблицу из задания 1 в терминах СУБД Му$01: приду- 
майте наименования, типы и возможные ключи для каждого из полей 
таблицы. 

3. Составьте запрос на языке 501, позволяющий добавлять сведения 
о новой статье к таблице из задания 1. 

4. Составьте запрос на языке 501, позволяющий обновлять содер- 
жимое некоторой статьи в таблице из задания 1. 

5. Составьте запрос на языке $ОГ, позволяющий удалять данные 
некоторой статьи в таблице из задания 1. 

6. Составьте запрос, отбирающий для будущего отображения 
на странице некоторую статью из таблицы из задания 1. 

7. Составьте программу на языке РНР, которая позволяет: 
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а) подключиться к базе данных, расположенной на сервере с име- 
нем $а под логином $Б, паролем $с, к базе данных под именем $4; 

6) выполнить запрос по получению некоторой статьи из базы дан- 
ных; 

в) разместить эту статью на странице с выводом информации 
об авторе, наименовании, дате создания и содержании статьи. 
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Тема 8 
М\УС-ФРЕЙМВОРКИ И СМ5-СИСТЕМЫ 


После изучения данного раздела студент должен 

знать 

• назначение модели МУС, 

• основные составляющие модели МУС и их назначение, 

• различные технологии создания динамических меЬ-приложений, 

• понятие и назначение РНР-фреймворков, 

• понятие и назначение СМ$-систем, 

преимущества и недостатки использования различных техноло- 
гий разработки мгер-приложений; 

уметь 

использовать одну из современных СМ5-систем для создания 
мгер-приложений; 

владеть 

• навыками сравнительного анализа современных фреймворков 
и СМ8-систем для обоснования выбора технологии разработки меБ- 
приложений. 


8.1. Понятие МУС 


На сегодняшний день можно выделить два наиболее типич- 
ных способа создания динамических м’ер-страниц. 

Первый способ предполагает, что в одном файле может со- 
держаться код как на языках программирования, так и на язы- 
ках разметки. Например, в начале файла производится запрос 
к базе данных для получения из нее какой-либо информации. 
Здесь, как мы видели ранее, используются методы РНР с вне- 
дренными в них запросами на языке 501. После этого, как пра- 
вило, начинается НТМІ-разметка страницы. В нужных местах 
производятся вставки РНР-кода, которые обрабатывают резуль- 
таты 5ОГ-запроса и «отдают» его в виде НТМГ-разметки. Таким 
образом, в одном файле применяются: 501, НТМІ и РНР. При 
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этом оформление страниц может включать стили С$$ и, при 
необходимости, ЈауаЅсгірг. 

Понятно, что такой стиль программирования затрудняет по- 
нимание логики, усложняет внесение изменений и требует по- 
стоянного участия создателя сайта. 

Второй способ связан с применением шаблона проектиро- 
вания МУС (Моае[-Угеи’-Сопётойег, Модель-Представление-Кон- 
троллер). 

Основная идея данного подхода заключается в необходимо- 
сти распределения однородных элементов по разным файлам. 
Если говорить очень упрощенно: один файл — один язык. По- 
мимо идеи разнесения разных языков в разные файлы, ключе- 
вой концепцией является также разделение файлов на группы 
в соответствии с теми функциями, которые они выполняют 
в приложении. 






































Модель Вид 
5ОГ-запросы, 501-запросы, 
получение данных получение НТМІ-код 
данных 
НТМІ-код 
Вставка блока рея РА А 
РНР-логики 
РНР- 
Вставка блока логика 
РНР-логики Контроллер 
Вставка блока 
РНР-логики 
Классическая модель Модель МУС 


Рис. 8.1. Отличия схемы МУС и традиционной схемы программирования сайтов 


Шаблон проектирования МУС предполагает разделение 
данных приложения, пользовательского интерфейса и управ- 
ляющей логики на три отдельных компонента: Модель, Пред- 
ставление и Контроллер — таким образом, что модификация 
каждого компонента может осуществляться независимо. 

Модель представляет собой совокупность процедур и алго- 
ритмов обработки данных. Сама по себе Модель не содержит 
данных, но как правило получает их из БД и обрабатывает 
по заранее описанным алгоритмам. Если говорить о мер- 
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разработке, то модель будет содержать набор классов и функ- 
ций, например, на языке РНР, которые реализуют работу с ба- 
зой данных и интерпретируют результаты 501.-запросов. 

Естественно, чтение информации из БД может быть выпол- 
нено несколькими функциями. В качестве примера можно рас- 
смотреть модель, реализующую работу с базой данных статей 
для сайта. Отдельные функции помогут получить конкретную 
статью из БД, список последних статей, список популярных ста- 
тей, список статей, относящихся к определенной теме ит. д. 

Второй элемент — это Представление, Міеу. Оно позволяет 
отобразить информацию. Если это сайт, то информация ото- 
бражается в браузере. Представление при разработке сайтов 
содержит НТМГ-код, в который подставляются переменные, ко- 
торые берутся не из модели, а из контроллера. Представление 
отслеживает изменения в модели и создает или меняет интер- 
фейс РНР-приложения. 

Третий элемент — это Контроллер. Его главная функция — 
это обеспечение связи между представлением и моделью. 
Он также может содержать РНР-код. При обращении пользова- 
теля по нужному ОНТ, выбирается соответствующий контролер, 
который обращается к модели, после чего информация выво- 
дится посредством нужного представления. 


8.2. Использование РНР-фреймворков 


В первой части данного учебного пособия уже говорилось 
о фреймворках (в частности о С$$-фреймворках). Фреймворк 
для любой из серверных технологий мер-программирования — 
это фундамент, который определяет архитектуру будущего при- 
ложения и содержит в себе отлаженный код для решения часто 
используемых задач м’еБ-разработчика, таких как работа с фор- 
мами, базой данных, шаблонами и т. д. На базе фреймворка 
можно написать сложную прикладную информационную си- 
стему или даже конструктор других систем. 

РНР-фреймворк — это набор технологий, которые включа- 
ют не только библиотеки распространенных модулей, но и ша- 
блоны проектирования. Можно при написании каждого нового 
приложения изобретать велосипед с распределением его основ- 
ных модулей, структурой папок, классами обработки основных 
компонентов и т. п., а можно воспользоваться готовым универ- 
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сальным решением. Большинство таких фреймворков исполь- 
зуют модель МУС, что позволяет создавать более читабельный 
код, который легче изменять. Большинство РНР-фреймворков 
содержат встроенные средства выполнения основных опера- 
ций с базами данных. 

Ниже представлен обзор некоторых наиболее широко ис- 
пользуемых в наше время РНР-фреймворков. 

Іагахеї. Один из самых популярных РНР-фреймворков, по- 
зволяющий максимально упростить решение основных задач, 
таких как аутентификация, маршрутизация, сессии и кэширо- 
вание. Гагауе| создавался как попытка объединить все лучшее, 
что есть в других РНР-фреймворках, а также в технологиях АЗР. 
МЕТ, МУС и других. Одно из самых важных его достоинств — 
наличие интегрированной системы модульного тестирования. 

Гепа. Объектно-ориентированный фреймворк, использую- 
щий все последние достижения РНР. Разработан так, что каж- 
дый компонент можно использовать отдельно. Стандартный 
набор библиотек делает его очень мощным и легко расширяе- 
мым средством разработки. Кроме того, он предлагает надеж- 
ную и высокопроизводительную реализацию МУС и удобную 
в использовании абстракцию базы данных, а также множество 
других возможностей, которые делают его одним из самых 
функциональных фреймворков. 

СакеРНР — написанный на РНР программный каркас для 
создания веб-приложений, поддерживаемый быстрорастущим 
сообществом. Как и большинство других фреймворков, реали- 
зует шаблон проектирования МУС. 

Соде Іспіѓег. Наиболее простой в освоении и использова- 
нии фреймворк. Легко расширяется, безопасен и использует 
простые и понятные подходы. Одно из основных его преиму- 
ществ — скорость работы, он быстрее справляется с задачей 
взаимодействия с БД, чем другие. 

бутюпу. Одно из основных его достоинств — поддержка 
множества СУБД (МуФОГ, Розетеб ОГ, ОЕ). 

Үйі. Высокопроизводительный РНР-фреймворк, чьи возмож- 
ности позволяют в сжатые сроки реализовывать крупномас- 
штабные проекты типа форумов, порталов, СМ$ (см. ниже) 
и других сложных систем. В него встроено множество про- 
веренных и готовых к использованию решений: конструктор 
запросов, многоуровневая поддержка кэширования и многие 


другие. 
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8.3. Понятие и возможности СМ5 


Выше были описаны два пути создания динамических мер- 
сайтов. Во-первых, это написание программ на одном из язы- 
ков, например, РНР, «с нуля», во-вторых — использование 
готовых решений для реализации основных функциональных 
модулей сайтов с применением фреймворков. 

Существует еще один путь — воспользоваться программны- 
ми средами, которые называются системами управления кон- 
тентом (СошепЕ МапазетепЕ $ует, СМ5). Преимуществом 
этого пути является уменьшение затрат времени — создавать 
сайты с использованием СМ$ могут даже не очень опытные 
разработчики. К недостаткам применения СМ$ можно отнести 
снижение гибкости, предоставление недостаточного или слиш- 
ком большого набора возможностей. 

Под контентом (от англ. сопѓепё, содержание или содержи- 
мое) понимают информационное наполнение сайта — то есть 
все типы материалов, которые находятся на сервере: мгеБ- 
страницы, документы, программы, аудиофайлы, фильмы и так 
далее. Таким образом, управление контентом — это процесс 
управления подобными материалами. Этот процесс включает 
следующие действия: размещение материалов в базе данных, 
удаление материалов из базы данных, организацию (реоргани- 
зацию) материалов, возможность отслеживать их состояние. 

Функции СМ5 можно разделить на несколько основных ка- 
тегорий. 

1. Создание — предоставление авторам удобных и привыч- 
ных средств создания контента. 

2. Управление — хранение контента в едином репозито- 
рии. Это позволяет следить за версиями документов, контро- 
лировать, кто и когда их изменял, убеждаться, что каждый 
пользователь может изменить только тот раздел, за который 
он отвечает. Кроме того, обеспечивается интеграция с суще- 
ствующими информационными источниками и ИТ-системами. 

3. Публикация — автоматическое размещение контента 
на сайте пользователя. Соответствующие инструменты автома- 
тически адаптируют внешний вид страницы к дизайну всего 
сайта. 

4. Представление — дополнительные функции, позволяю- 
щие улучшить форму представления данных; например, можно 
строить навигацию по структуре репозитория. 
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Использование СМ предоставляет следующие преимуще- 
ства: 

1. Оперативное обновление информации — информацию 
публикует сотрудник, владеющий информацией, без дополни- 
тельных посредников в виде технических специалистов. Поль- 
зователь сам может определять визуальное представление 
своих материалов, используя для этого стандартные средства, 
не требующие знания языка НТМІ. и других достаточно слож- 
ных для неспециалиста процедур. 

2. Снижение стоимости поддержки — обновление инфор- 
мации производится сотрудниками самостоятельно, нет необ- 
ходимости оплачивать труд собственного или внешнего меВ- 
мастера. Снижение стоимости происходит за счет снижения 
потерь времени на поиски документов, пресечения дублирова- 
ния и ошибок, увеличения скорости связи с партнерами и кли- 
ентами. 

3. Предоставление дополнительных сервисов пользовате- 
лю — часть сервисов (поиск, форумы, голосования и т. д.) тре- 
бует интерактивного взаимодействия с пользователем. Они 
уже реализованы в рамках СМ5. 

4. Уменьшение сроков и стоимости разработки — наибо- 
лее востребованная функциональность уже реализована в СМ$ 
и может быть сразу использована. 

5. Повышение качества разработки — при разработке пол- 
ностью или частично используются готовые модули, которые 
уже прошли неоднократное тестирование. 

6. Снижение стоимости дальнейших модификаций — СМ$ 
позволяют разделить данные и их представление. Это позво- 
ляет гораздо проще изменить внешний вид сайта, чем в случае 
со статическим сайтом. 

Рассмотрим наиболее распространеные современные СМ$, 
основанные на применении РНР. 

"Ргира! — это не только система управления контентом 
в классическом понимании этого термина. Это больше ядро, 
на основе которого можно собрать практически неограничен- 
ную функциональность сайта. 

На СМ$ Огара!| построены тысячи сайтов. Основные направ- 
ления разработок на Огира| — это блоги, социальные сети, пер- 
сональные сайты, корпоративные сайты, порталы сообществ, 
форумы, магазины, сайты-справочники. 
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"гира считается одной из самых надежных систем на се- 
годняшний день. Ее важное преимущество — бесплатность ис- 
пользования. Есть русскоязычное сообщество ПОгира|, где мож- 
но получить нужную техническую помощь. 

К недостаткам использования Пгира!| следует отнести слож- 
ность в освоении и использовании. Человек без начальных 
знаний м’еБ-программирования вряд ли сможет использовать 
мощную функциональность системы. 

Јоотіа позволяет создавать сайты-визитки, интернет-ма- 
газины, порталы, сообщества, системы блогов, доски объявле- 
ний, корпоративные мультиязычные сайты и многие-многие 
другие сайты. 

Јоота полностью бесплатна, обладает множеством модулей 
расширения функционала (они имеют разные названия: «мо- 
дули», «компоненты», «мамботы», и направлены на решение 
различных задач). С помощью этих модулей можно добавить 
интернет-магазин на сайт компании буквально за несколько 
минут. При этом заказчик получает надежный магазин, кото- 
рый будет стабильно работать. Создано огромное число гото- 
вых шаблонов, которые подойдут практически для любого сай- 
та, можно также разработать и применить ко всем страницам 
собственный шаблон, хотя это требует определенного уровня 
знаний в области верстки и программирования. 

И/отаРге$$. Бесплатная СМ5, которая еще недавно рассма- 
тривалась только как инструмент для создания блогов. Однако, 
функциональность У!огАРгез$, как и всех остальных СМ5, рас- 
ширяется установкой дополнительных плагинов. Отличается 
очень простым алгоритмом установки и настройки, в настоя- 
щее время активно развивается. 

В практической части курса мы рассмотрим основные воз- 
можности СМ$ М/отаРгез$. 


Контрольные вопросы 


Для чего используется модель МУС? 

Опишите назначение основных элементов модели МУС? 
Что такое фреймворк? 

Для чего используются РНР-фреймворки? 

Какие РНР-фреймворки Вам известны? 

Что такое СМ5? 

Какие типы СМ$-систем Вам известны? 


мааи 
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8. Какие системы управления контентом сайтов Вам известны? 
9. В чем отличие технологии создания сайта вручную (путем про- 
граммирования всех страниц), с применением фреймворков и с при- 


менением СМ5? 
10. Какие достоинства и недостатки вы видите в применении пере- 
численных в вопросе 9 технологий реализации мер-сайтов? 


ПРАКТИКУМ 
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Практическая работа № 1 
ОСНОВЫ ЯЗЫКА НТМІ 


Цель: Изучить основные возможности языка НТМІ для соз- 
дания и связывания уеЬ-документов. 

Инструментарий: 1) любой редактор программного ко- 
да, например, поѓераа+ +, который можно бесплатно скачать 
с сайта разработчика по адресу ћїрѕ:/ /поѓераа-р1Іиѕ-ріиѕ.оге/ 
аоутоай/; 2) любой современный браузер. 


Задания 


1. Выполнить все шаги практической работы, в результате 
которых должен получиться трехстраничный сайт-визитка ту- 
ристической компании. 

2. По аналогии реализовать свой сайт, используя только 
возможности языка НТМИ, на любую интересующую вас тему. 
Меню вашего сайта должно быть вертикальным. Необходимо 
задействовать все известные вам типы тегов: заголовки, абза- 
цы, списки, изображения, таблицы, формы. 


Выполнение задания 1 


Шаг 1. Создание главной страницы сайта. 

На этом шаге мы показываем реализацию в среде Моераа+ +. 
Следующие шаги описываются только кодами страниц, кото- 
рые вы также можете вводить и отлаживать в М№оѓераа+ +. 

Итак, в среде Моера@- + создадим новый документ и сохра- 
ним его в отдельной папке под именем іпаех.һіті]. 

Введем следующий текст. Старайтесь соблюдать структуру 
документа — отступы с использованием пробелов или табуля- 
ции, которые позволяют описать иерархию тегов. 


<!-- Начало НТМІ документа --> 
<!БОСТУРЕ һём1> 

<Вт1> 

<!-- Начало заголовка документа --> 


<һћеаа» 
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<!-- Служебная информация о кодировке документа --> 
<тефа НЕЕр-еди1\у = "Сопёепё-Туре" 
сопфепе = "ёехі/һіт1; сһагѕеё = и-8"> 
<!-- Информация, которая будет отображаться на вкладке браузера 
--> 
<61і41е> 
Сайт туристической компании 
</+141е> 
<!-- Конец заголовка документа --> 
</һеаа> 
<!-- Начало тела документа --> 
<Боду> 
<!-- Начало блока, содержащего всю страницу --> 
<аіу іа = "сопёепё" > 
<!-- Начало блока заголовка страницы --> 
<Веадег> 
<!-- Заголовок страницы --> 
<ћ1> 
ПУТЕШЕСТВУЙ С НАМИ! 
</ћ1> 
<!-- Конец блока заголовка страницы --> 
</Неадег> 
<!-- Начало блока меню страницы --> 
<пау> 
<!-- Гиперссылка на главную страницу сайта --> 
<а һгеҒ = "іпаех.һёт1" > 
Главная страница 
</а> 
<!-- Гиперссылка на странииу с информацией о турах --> 
<а Пге+ = "Жиг5.Вт1" > 
Наши туры 
</а> 
<!-- Гиперссылка на страницу с контактной информацией --> 
<а һгеҒ = "сопёасіёѕ.һёт1" > 
О нас 
</а> 
<1-- Конец блока меню --> 
</пам> 
<!-- Начало блока с основным содержимым страницы --> 
<Ч1\у іа = "таіп"> 
<!-- Начало нового абзаца --> 
<р> 
Концепция отдыха с нашей компанией - это отдых в новом 
формате, где учтены интересы всех поколений. 


</р> 
<р> 
Наши основные направления: 
<!-- Начало блока с перечнем пунктов --> 
<и1> 
<!-- Блоки перечня пунктов --> 
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<11>Крым</11> 
<11>Кавказ </11> 
<11>Алтай</11> 
</ч1> 
</р> 
<р> 
Акции и скидки 
</р> 
<!-- Конец блока с основным содержимым --> 
</а1\> 
<!-- Начало блока "подвала" страницы --> 
<Фоофег> 
Это сайт, предназначенный для обучения 
<!-- Конец блока "подвала" страницы --> 
</Ғооег> 
<!-- Конец блока с полным содержимым страницы --> 
</41\> 


<!-- Конец тела документа --> 
</Боау> 

<!-- Конец документа --> 
</ћЕм1> 


Если открыть этот файл в любом из браузеров, должен полу- 
читься примерно такой результат: 


ПУТЕШЕСТВУЙ С НАМИ! 


Главная страница Наши туры О нас 





Концепция отдыха с нашей компанией - это отдых в новом формате, где учтены интересы всех поколений 
Наши основные направления: 

• Крым 

• Кавказ 

. Алтай 


Акции и скидки 


Это сайт, предназначенный для обучения 


Шаг 2. Описание структуры страницы. 

Попытаемся отформатировать страницу так, чтобы ее блоки 
занимали определенные области на экране за счет применения 
стилей к каждому из блоков. 

В область <һеаа>...< /Леаа> необходимо добавить следу- 
ЮЩИЙ КОД: 


<!-- Начало описания стилей --!> 

<5фу1е> 
/*-- Описание стиля всей страницы --*/ 
аіу#соптеп { 
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/*-- Ширина - 80% от Всего экрана --*/ 

міаһ: 80%; 

/*-- Рамка отсутствует --*/ 

Богаег: попе; 

/*-- Выравнивание по центру занимаемой области --*/ 
таг51п: аи+о; 


/*-- Описание стиля заголовка и подвала --!> 
һеайег, Ғоо+ег { 

/*-- Отступ текста от края блока - Лет - текущий размер 
шрифта, для увеличения или уменьшения можно брать любые пропорции 
от текущего:2ет,0.5ет --*/ 

райдіпе: 1ет; 

/*-- Цвет шрифта-белый --*/ 

со1ог: мһі+е; 

/*-- Цвет фона --*/ 

браскегоипа-со1ог: #007196; 

/*-- Отменяет обтекание с левого края элемента, 
все другие элементы на этой стороне будут располагаться 
под текущим элементом --*/ 

с1еаг: 1е+е; 

/*-- Выравнивание текста по центру --*/ 

Техі-а1ірп: сепїег; 


/*-- Описание стиля блока меню --*/ 

пау { 
/*-- Высота блока в пикселях --*/ 
һеівһі: 40рх; 
/*-- Ширина и цвет линии обрамления --*/ 
Богаег: $0114 #333; 
рад41 пт: 1ет; 
Техі-а1ірп: сеп+ег; 


/*-- Описание стиля ссылки в меню --!> 

пау а { 
/*-- Для ссылок используется оформление по умолчанию --*/ 
фех*-Чесога*1от: попе; 
раааіпе: 1ет; 


} 
/*-- Описание стиля основного блока страницы --*/ 
#таіп { 
райдіпе: 1ет; 
} 
</ѕ+у1е»> 
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Результат этих изменений в браузере: 


ПУТЕШЕСТВУЙ С НАМИ! 


Главная страница Наши туры О нас 





Концепция отдыха с нашей компанией - это отдых в новом формате, где учтены интересы всех поколений 
Наши основные направления: 

* Крым 

* Кавказ 


* Алтай 


Акции и скидки 





уто сайт, предназначенный для обучения 


Шаг 3. Добавление оформления к элементам таблицы. 

В папке, содержащей файл ш4ех.Б и, создадим папку іте 
для хранения картинок, которые будут использоваться на сайте. 

Скопируем в нее картинку по тематике сайта, и пусть, на- 
пример, она имеет имя 1020.]р®. 

Поместим картинку Іоғо.јре слева от заголовка сайта. Для 
этого в блоке <һеайег>...< Леайег> нужно создать два бло- 
ка — один для вывода логотипа, другой — для названия. Соот- 
ветствующие изменения нужно внести в описание стилей. 

Изменения в структуре: 


<Пеадег> 
<1-- Начало блока для логотипа --> 
<аіу іа = "1ово"> 


<!--Вывод логотипа--> 
<іте 5гс = "іте/1оро.јре"> 


<!-- Конец блока для логотипа --> 
</аім> 
<1-- Начало блока для названия --> 
<аіу іа = "пате" > 
<ҺІ>ПУТЕШЕСТВУЙ С НАМИ! </һ1> 

<1-- Конец блока для названия --> 
</аім> 

</Неааег> 


Добавление к стилям: 


/*-- для тега ітд, который размещен в блоке с идентификатором 
1090: ширина- 200 пикселей, Высота- 150 пикселей, прижать к левой 
части родительского блока и заставить следующий блок обтекать его 
справа --*/ 
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діу #1050 Чтв { 
міаёһ: 200рх; 
һеіеһе: 150рх; 
Поа: Іеғё; 

} 


В результате получим: 


ПУТЕШЕСТВУЙ С НАМИ! 


Главная страница Наши туры О нас 





Концепция отдыха с нашей компанией - это отдых в новом формате, где учтены интересы всех поколений 
Наши основные направления: 

* Крым 

* Кавказ 


. Алтай 
Акции и скидки 


Это сайт, предназначенный для обучения 





Шаг 4. Использование полученного шаблона для создания 
других страниц сайта. 

Создайте две копии полученной страницы в той же папке 
и дайте им имена іигѕ.һті] и сопѓасіѕ.һт]. Именно так, если 
вы помните, называются файлы, на которые уже имеются ссыл- 
ки в нашем меню. Теперь для поддержания общей структуры 
и оформления сайта на любой странице мы будем изменять 
только содержимое страницы, которое размещается внутри 
блока с идентификатором тат. 

Шаг 5. Создание содержимого второй страницы. 

На второй странице с именем 115.61] создадим таблицу, 
содержащую список туров. Это можно было бы сделать с ис- 
пользованием блоков АУ, но иногда полезно применять табли- 
цы, и мы потренируемся делать это. Итак, пусть необходимо 
создать таблицу, содержащую три строки с названиями туров, 
каждая из которых содержит также фото и некоторую дополни- 
тельную информацию 

В блок таш поместим следующий код: 


<аіу іа = "таіп"> 


<!-- Начало таблицы с идентификатором Ұоирѕ --> 
<фаб1е іа = "+оигѕ"> 


136 


Тодт: @й Ббооокѕ 


<!-- Первая строка таблицы --> 
<Ег> 
<!-- Первый столбец первой строки будет далее делится 
на два --> 
<{4 гомѕрап = 2>Туры в Крым</*а> 
<!-- Второй столбец первой строки --> 
<фа>Отель "Волна" </+а» 


</6г> 
<!-- Вторая строка --> 
<г> 
<!-- Второй столбец второй строки, первый столбец 


"растянулся" из первой строки --> 
<{9>Отель "Море" </+а» 
</6г> 
<!-- Третья строка --> 
<Ёр> 
< гомзрап = 2>Туры на Кавказ</+а»> 
<{а>Курортный отдых</Еа> 
<Р> 
<еа>Горный туризм</®а» 
</ЕР> 
<Їр> 
<а гомзрап = 2>Туры на Алтай</+а» 
<фа>Зеленый туризм</+а» 
<Їр> 
<еа>Конные туры</&а»> 
</6г> 
</{аб1е> 
</91\> 


Добавим стили для таблицы: 


/*-- Для Всей таблицы: --*/ 
{аб1е#оиг$ { 
/*-- Ширина 80% от ширины родительского блока --*/ 
міа+ћ : 80%; 
/*-- Выравнивание по центру --*/ 
пагвіп:аи+о; 


/*-- Для отдельной ячейки таблицы: --*/ 
+аб1е#+оигѕ +а{ 
/*-- Текст Выровнен по левому краю --*/ 
фех*-а115п: Іе#+; 
/*-- Сплошная красная рамка толщиной 2 пикселя --*/ 
Богаег: 2рх $0114 геа; 
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Получим: 


ПУТЕШЕСТВУЙ С НАМИ! 


Главная страница Наши туры О нас 


Это сайт, предназначенный для обучения 





Шаг 6. Создание форм. 

На примере страницы сопќѓасіѕ.һтіІ продемонстрируем ис- 
пользование форм. Пусть на третьей странице сайта необходи- 
мо создать форму для обращения пользователя к администра- 
тору сайта. 

Для более аккуратного вывода форму можно также разме- 
стить в виде таблицы. Для этого в блок таіп третьей страницы 
добавим следующий код: 


<р> 
Наш адрес: г. Белогорск, ул. Ракетная, 18. 
</р> 
<р> 
Для связи с нами заполните форму: 
</р> 
<!-- Начало формы, программа, которая будет ее обрабатывать пока 
неизвестна --> 
<Ғогт те&һоа = "ве" асёіоп = "#"> 
<!-- Начало таблицы --> 
<фаб1е іа = "Ғогт" > 
<г> 
<{9>Введите свое имя< /&а> 
<1-- Простое текстовое поле для ввода имени --> 
<ъа><іприє пате = "пате" >< /+а» 
</6г> 
<Їг> 
<а>Введите ваш номер телефона </+а> 
<!-- Простое текстовое поле для ввода телефона --> 
<іа»><іприї пате = "%е1"></+а> 
</Ег> 
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<1г> 
<фа>Введите ваш электронный адрес</+а»> 
<!-- Простое текстовое поле для ввода адреса электронной почты 


--> 
<ъа><іприє пате = "та11"></%а> 
</6р> 
<Ер> 
<{9>Введите Ваше сообщение</+а> 
<їа» 
<!-- Поле для ввода многострочного сообшения -- > 
<фехфагеа пате = "Сех" гом$ = "3" > 
</ехфагеа> 
</&а> 
</6р> 
<1р> 
<Я со1ѕрап = 2> 
<!-- Кнопка для отправки формы на обработку --> 
<іприє паме = "оёр" +уре = "ѕибті+" уа1ие = "Отправить" > 
</ъа» 
</6г> 
</+аб1е> 


Если указать стиль для этой таблицы, такой же как для пре- 
дыдущей, получим следующий результат: 


ПУТЕШЕСТВУЙ С НАМИ! 


Главная страница Наши туры О нас 





Наш адрес: г. Белогорск, ул. Ракетная, 18 


Для связи с нами заполните форму: 


Введите ваш ЕЕ СЕТИ 


Введите ваш [ Введите ваш электронный адрес] адрес 


нан "8 монен БЕ 


Это сайт, предназначенный для обучения 
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Практическая работа № 2 
ОСНОВЫ ИСПОЛЬЗОВАНИЯ С55 


Цель: Изучить основные возможности технологии С55 для 
создания структуры међ-документов и единого стиля оформле- 
ния үғеһ-сайтов. 

Инструментарий: 1) Любой редактор программного кода, 
например, по{ераа- +; 2) Любой современный браузер. 


Задания 


1. Создать внешнюю таблицу стилей для сайта, разрабо- 
танного в ходе выполнения задания 1 из практической работы 
№ 1, которая позволит продемонстрировать возможности С55 
по разметке и единому оформлению мер-сайта. 

2. Усовершенствовать собственный сайт, который был реали- 
зован в задании 2 практической работы № 1. В результате должен 
получиться сайт с вертикальным интерактивным меню с кнопка- 
ми, оформленный в едином стиле, содержащий список новостей 
с иллюстрациями на главной странице, дополнительную инфор- 
мацию на второй странице и контакты с возможностью обрат- 
ной связи на третьей странице. Страницы сайта должны содер- 
жать только НТМГ-код, все стили должны быть вынесены в файл 
ѕіуІе.сѕѕ, который помещен в папку С$5 в папке проекта. 


Выполнение задания 1 





Все шаги выполняются для сайта туристической компании, который 
был создан в ходе выполнения задания № 1 из Практической работы № 1. 


Шаг 1. Создание и подключение внешней таблицы стилей. 

В папке, содержащей созданный в ходе выполнения практи- 
ческой работы № 1 проект, создайте папку С55. 

Внутри этой папки создайте текстовый файл ѕіу]е, который 
сохраните с расширением ${Уе.с55. Переместите в этот файл 
содержимое блока <ѕіуІе>...< /ѕіуІе> из файла шаех.Вит] (без 
тегов <ѕіуІе>...< /ѕїуІе>). 
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Удалите блок <ѕіуІе>...< /ѕ(уІе> из всех НТМГ-файлов про- 
екта. 

Вместо этого добавьте в каждый из файлов в область 
<Һһеаа>...< Леаа> строку подключения таблицы стилей: 


<Ііпк һгеҒ = "сѕ5/5+у1е.сѕ5" геї = "ѕїуІеѕһееї" Журе = "Жехі/сѕ5"> 


Убедитесь в том, что сайт по-прежнему поддерживает все 
созданные ранее стили. 

Теперь для изменения стилей всего сайта будем править 
только таблицу стилей. 

Шаг 2. Работа с общей таблицей стилей. 

Изменим стиль шрифта всего сайта. Для этого укажем (до- 
полнительно к уже имеющимся стилям): 


/* Для Всего содержимого страницы */ 
аіу#сопёепё { 
/* Начертание шрифта */ 
Ғоп- Ғаті1у :Мегаапа; 
/* Стиль шрифта */ 
Ғопі-5%у1е: погта1; 
/* Размер шрифта */ 
Фоп*-$17е :погта1 ; 
/* Жирность шрифта */ 
Топ -меірћ :бо1а; 
/* Выравнивание текста */ 
Техі-а1їірп:сепїег; 


Все возможные значения этих и других атрибутов шрифта 
можно увидеть, например по этой ссылке: Һр: //ҺтБоокК.ги/ 
сопѓепі/ѕуоуѕіуа-іеКѕа. 

Коды цветов можно получить пройдя по этой, например, 
ссылке: һрѕ:/ /соІогѕсһете.ги/Ћті]-соІогѕ.Һті]. 

Однако если вы посмотрите на полученный результат, 
то становится очевидно, что жирный (Бо!а) шрифт в основной 
области страницы не нужен. Возможно также, лучше изменить 
выравнивание текста в этой области на выравнивание по всей 
ширине. Для этого мы можем переопределить это свойство 
в стиле блока с идентификатором таіп: 


#таіп { 
/* Новый цвет текста содержимого */ 
со1ог:#008080; 
/* Отмена жирного шрифта */ 
Ғопі-меірћ& :погма1 ; 
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/* Выравнивание по Всей ширине блока */ 
+ехі-а1івп:јиѕ+і+у; 
} 


Далее, хотелось бы, чтобы ссылки в меню были больше по- 
хожи на кнопки. Для этого их можно оформить, например, так: 


/* для Всей области меню */ 
пау { 
Ве1ёН*: 40рх; 
Богаег: $0114 #333; 
рааа1т8: 1ет; 
+ехі-а1ірп: сеп+ег; 
11514-5#у1е-+уре: попе; 
/* цвет фона меню */ 
баскегоипа-со1ог : #66СрАА; 


} 


/* для отдельных ссылок в области меню */ 
пау а { 

/* отступ между пунктами меню */ 

тагвіп-гівһї:10рх; 

/* отменить подчеркивание ссылки */ 

Техі - їесога+іоп: попе; 

райаіпе: 10рх; 

со1ог:мһіте; 

/* рамка для каждого пункта меню */ 
Богаег: $0114 мһі+е 2рх; } 


Получим следующий результат: 


ПУТЕШЕСТВУЙ СНАМИ! 
3442 


Концепция отдыха с нашей компанией - это отдых в новом формате, где учтены интересы всех 
поколений 





Наши основные направления: 
• Крым 
• Кавказ 
• Алтай 


Акции и скидки 


Это сайт, предназначенный для обучения 





Шаг 4. Применение стилей для классов блоков. 

Теперь попробуем разбить содержимое главной области еще 
на три блока, в каждом из которых будет выводиться информа- 
ция об одном из направлений путешествий. Поскольку все об- 
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ласти должны быть оформлены в одном и том же стиле, удобно 
применять классы. 

Сохраним в папке проекта іте три изображения, соответ- 
ствующие трем направлениям, о которых хотим написать: 
сгітеа.јре, КауКах.јре, аКау.]ре®. 

Добавим в файл іпӣех.һті такой фрагмент кода: 


<!-- Создадим блок-обертку для всех блоков по направлениям --> 
<аіу іа = "Фоиг$"> 
<р>Акции и скидки</р> 
<!-- Создаем новый блок класса Фоиг --> 
<аіу с1аѕ5 = "фоиг"> 
<р>Крым</р> 
<!-- Вставляем соответствущую картинку --> 
<іте эгс = "іте/сгітеа.јрв" > 
<р» 
<!--Добавляем ссылку на страницу (будущую) с более подробной 
информацией --> 


<а с1аѕ5 = "асііа" Вгеф = "#" > 
Подробнее об акции 
</а> 
</р> 
</а1\> 
<1-- Создаем еще один блок такого же класса --> 
<а1у с1аѕ5 = "%оциг"> 
<р>Кавказ</р> 
<118 ѕгс = "імтер/ Каука. јре" > 
<р» 
<а с1аѕѕ = "асііа" һгеҒ = "#"> 
Подробнее об акции 
</а> 
</р> 
</аім> 
<1-- Создаем еще один блок такого же класса --> 
<аіу с1аѕ5 = "Ғоиг"> 
<р>Алтай</р> 
<іте 5гс = "іте/а1+ау.јре" > 
<р» 
<а с1аѕ55 = "асііа" һгеҒ = "#"> 
Подробнее об акции 
</а> 
</р> 
</аім> 
<!-- Закрываем блок-обертку - - > 
</аіум> 


Добавим к таблице стилей стили, описывающие новые бло- 
ки и их отдельные элементы: 


/* Для блока-обертки: */ 
#ёоигѕ { 
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/* Выравнивание текста по левому краю */ 
техі-а1ірп:1Іе#+; 
} 
/* Для блоков каждого из направлений: */ 
.оиг { 
/* Занимает 30% от ширины блока-обертки */ 
міаһ: 30%; 
/* В цветной рамке */ 
Богаег: #66СрАА $0114 2рх; 
/* Расположение текста по центру */ 
{ехЕ-а115п: сепїег; 
/* Внутренний отступ со всех сторон */ 
райдіпе: 5рх; 
/* Внешний отступ со Всех сторон */ 
маг=1т: Зрх; 
/* Прижимается к левой стороне, следующий блок обтекает его 
справа */ 
Яоа*: 1е+е; 
} 


/* Для картинок внутри блоков */ 
„боиг іте { 

мМіаёєһ-мах; 

һеівһё: 150рх; 
| 


/* Для ссылок внутри блоков (чтобы сделать их более похожими 
на кнопки, 6 одном стиле с кнопками меню */ 
аіу.+оиг а { 

баскегоипа-со1ог: #66СрАА; 

Техі-дӢесогаіоп: попе; 

райаіпе: Зрх; 

со1ог: мһі+е; 

/* Кнопки с эффектом выпуклости */ 

Бох-5Падош: 20рх @ 20рх -20рх #000 іпѕеї, -20рх Ө 20рх -20рх 
#000 іпѕеї; 


} 


В результате получим: 


ПУТЕШЕСТВУЙ С НАМИ! 
ЎШ 





Акции и скидки 


Крым Кавказ Алтай 





ти = 
Подробнее об акции 





Это сайт, предназначенный для обучения 
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Внешний вид страницы уже довольно привлекательный, ОД- 
нако при попытке просмотреть эту страницу на меньшем экра- 
не вы заметите множество проблем. Эти проблемы мы попро- 


буем решить в следующей работе. 
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Практическая работа № 3 
ВЕРСТКА САЙТА С ПРИМЕНЕНИЕМ 
ФРЕЙМВОРКА ВООТЅТВАР 


Цель: Изучить основные возможности технологии Бооѓѕігар 
для создания адаптивных мер-сайтов. 

Инструментарий: 1) любой редактор программного кода, 
например, по{ераа-+ +; 2) любой современный браузер 


Задания 


1. Переверстать сайт, выполненный вручную в первых двух 
практических работах, с применением фреймворка Вооѓѕігар. 

2. Переверстать собственный мер-сайт с применением того 
же подхода. 


Выполнение задания 1 


Мы создадим еще одну, совершенно новую версию сайта. 

Шаг 1. Подключение и настройка Вооѓѕігар. 

Для подключения Вооѓѕігар можно использовать два пути. 

1. Скачать фреймворк с официального сайта и хранить его 
вместе с проектом локально. В этом случае можно вести раз- 
работку в режиме оН_-Ппе. 

2. Подключить фреймворк оп-іпе. 

Мы воспользуемся первым способом. 

По ссылке ћїрѕ:/ /веооѓѕігар.сот/0с5/4.4/веіпе-Ѕ(агіеа / 
аоупоаа/ скачаем архив фреймвока (на момент написания 
пособия была доступна версия 4.4.1). 

Создайте новую папку под именем, например, ітахе], и рас- 
пакуйте в нее скачанный архив. При этом вы должны в папке 
ітауе] получить следующую структуру папок: 


Локальный диск (Е:) > ігаме| > 


^ 
Имя 


® с 
1 5 
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В той же папке создайте файл іпаех.ћіті, в который ско- 
пируйте базовый документ Ѕќагїег ієетріаѓе, размещенный 
на странице 2еЁ ѕќагїеа сайта Вооѓѕігар. 

Открыть этот файл в используемом редакторе кода и под- 
ключить Бооѓѕітар локально: 


<!аосфуре һЕт1» 


<ВЕт1 1апё = "еп" > 


<Веаа> 
<!-- Кедитгеа тета +ад95 --> 
<тефа сһагѕе = "иЁҒғ-8"> 
<тефа пате = "уіемрогі" сопёепі = "міаһ = Ядеуісе-міа+ћ, 


іпіїіа1-ѕса1е = 1, ѕһгіпк-Ёо-ћЁ = по" > 


<!-- Вооф5Егар С55 --> 
<! Подключаем Бооф5тгар локально -- > 
<Ііпк ге1 = "ѕ+у1Іеѕһее" пге+ = "с55/Боо%*$%гар.т1п.с$5"> 


<+1{1е>Не11о, мог1а!</+11е> 
</һеаа» 
<Боау> 

<һ1>Не110, мог1а! </һ1> 


<!-- Ор+іопа! ЈамаЅсгірі --> 
<!-- јдиеғу рг$®, Еһеп Роррег.]5, Реп ВооЕѕЕгар 25 --> 


<! Подключаем библиотеки Зауа$ сгтрЕ локально -- > 
<5СГ1ре $гс = "јѕ5/бооїѕігар.тіп.ј5" </зсг1ре> 
</Боау> 
</Нт1> 


После просмотра полученного документа в браузере должно 
получиться следующее: 


С 88 УРМ) [у  Ме:///Е:Агаме/таех. Вит! 


Нео, мой! 


Нам придется также переопределять некоторые стандарт- 
ные стили Вооѓѕітар, поэтому создадим еще один собственный 
файл стилей ѕіуІе.сѕ5 в папке С5$, которая создалась при рас- 
паковке Бооѓѕїгар, и подключим его в файле шаех.В т: 


<!-- Вооф5Егар 655 --> 
<Ііпк ге1 = "ѕ1+у1еѕһее" пге+ = " бооїѕігар-4.4.1-151/с55/ 


рооЁѕігар.міп.сѕ5" > 


<!-- Здесь добавляем ссылку на собственные стили --> 
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<1--Собственные стили- - ! > 
<1іпк ге1 = “ѕ+у1еѕһее” Пге+ = “с$$/$%у1е.с$$” > 


Если теперь в этом файле переопределить основное начерта- 
ние шрифта, например так: 


Боау { 
Ғоп- Ғаті1у :Мегаапа; 


} 


вы должны увидеть соответствующее изменение надписи Нео 
ууот14! 

Шаг 2. Использование сетки Бооѓѕігар для описания за- 
головка сайта. 

Мы будем придерживаться стиля сайта, который был создан 
в первых двух работах, поэтому первой областью должна стать 
область заголовка. Используем для него сетку Вооѓѕігар, кото- 
рая позволяет использовать уже готовые (описанные в самой 
библиотеке Вооѓѕігар) стили для строк и столбцов. 

Предварительно подготовьте в папке проекта папку іте 
с картинками из предыдущего варианта сайта 

Вместо блока, который выводит «Нео Мога!», поместим 
следующий код: 


<!-- Используем стиль Боду-®ор по умолчанию для Всего документа 
--> 
<Боду с1аѕ5ѕ = "броау-+ор"> 
<!-- Создаем блок для области заголовка --> 
<Неадег с1а$$ = "сопфа1пег"> 
<!-- Создаем новую горизонтальную область (строку) --> 
<аіу с1аѕ5 = "гом"> 
<!-- Внутри горизонтальной области определяем первую колонку 
шириной 3/12 --> 
<аіу с1аѕ5 = "со1-3"> 
<!-- Внутри выводим логотип --> 
<іте іа = "1080" $гс = "іте/1оро.јрв"> 
<!-- Завершаем первый столбец --> 
</а1\> 
<!-- Внутри горизонтальной области определяем вторую 
колонку, шириной 9/12 --> 
<аіу с1аѕ5 = "со1-9"> 
<!-- Внутри выводим название --> 
<һ1>Путешествуйте с нами! < /һ1> 
<!-- Завершаем второй столбец --> 
</аім> 
<!-- Завершаем строку --> 
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</аім> 
<!-- Завершаем описание области заголовка --> 
</һеайег> 


В своем файле ѕѓуІе.сѕѕ переопределим стили: 


/* Оформление содержимого всей страницы по умолчанию скопировано 
с предыдущей версии сайта */ 
.боау-+ор { 
міаһ: 80%; 
Богаег: попе; 
таг51п: аито; 
Ғопі- Ғамі1у :Мегаапа; 
Ғопї-ѕ№у1е: погта1; 
Фоп*-$17е: погта1; 
Ғоп-меірһе: Бо1а; 
Техі-а1івп: сеп+ег; 
} 
/* Оформление содержимого Всего блока заголовка */ 
Неааег { 
райдіпе: 1ет; 
со1ог: мһіќ+е; 
браскегоипа-со1ог: #007196; 
уег{1са1-а115п: сепфег; 
} 
/* Размер логотипа для средних и больших экранов */ 
#1оро { 
тах-міаһ: 180рх; 
тах-һеірһё: 140рх; 
} 
/* "Плавающее" в зависимости от изменения экрана название */ 
.с01-9 { 
915р1ау: Яех; 
} 
/* Заголовок в плавающем окне по центру */ 
ћ1{ 
таг21п: аи+о; 
} 
/* МЕДИА-ЗАПРОС позволяет сделать размер логотипа и названия мень- 
шими при изменении размера окна до размера мобильного устройства */ 
@теаіа ѕсгееп апа (тах-м1аЕН: 768рх) 


{ 
#1оро { 
пах-міаєһ: 100рх; 
тах-һеірһі: 7@рх; 
} 
һ1 { 
Фоп{-$17е: 14рх; 
) 
} 
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Результат будет таким: 


Е 2 Путешествуйте с нами! 





Обязательно попробуйте уменьшить размер экрана и убеди- 
тесь в том, что область заголовка адаптивна, то есть медиа-за- 
прос работает. 

Шаг 3. Создание меню навигации. 

Это один из готовых блоков Вооѓѕїігар, код которого нужно 
скопировать на сайте, вставить в нужное место страницы и от- 
редактировать стили по умолчанию. 

Скопируем со страницы ћірѕ:/ /веіооѓѕігар.сот/0с5/4.4/ 
сотропепіѕ/пауѕ/ один из вариантов горизонтального меню, 
например, МогКкіпе ми Пех ш1ібіеѕ, и вставим этот код в оберт- 
ку класса тепи после начала области Һеайег. 

Далее необходимо убрать (или добавить) гиперссылки для 
всех пунктов меню и отредактировать их с учетом ваших стра- 
ниц и их ОВГ. 


<!-- Обертка для меню --> 
<а1у іа = "тепи" > 
<!-- Начало Йех-меню --> 
<пау с1аѕ5 = "пау пау-рі115 Яех-со1итп Яех-ѕт- гом" > 
<!-- Ссылка на главную страницу --> 
<а с1аѕ5 = "Яех-зт-#11 бехі-ѕт-сепёег пау-1іпк" Вгеф = "1пдех. 
һЕт1">Главная</а»> 
<!-- Ссылка на страницу с информацией о турах --> 
<а с1аѕ5 = "Яех-зт-#11 бехі-ѕт-сепёег пау-1іпк" Вгеф = "Фоиг$. 
һт1">Наши туры</а> 
<!-- Ссылка на страницу с контактами --> 
<а с1аѕѕ = "Яех-зт-#11 бехі-ѕт-сепёег пау-1іпк" һге# 
"сопбасіѕ.һЕт1">0 нас</а> 
</пам> 
</аіу> 


Далее переопределим некоторые стили этого меню так, что- 
бы они больше походили на меню из предыдущего проекта: 


#тепи { 
/* Фон всего меню */ 
баскегоипа-со1ог : #66СрАА; 


} 
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а { 

/* Цвет и рамка каждого пункта меню */ 

со1ог:мћһі+е; 

рогаег:ѕо1іа мһі+е; 

рох-ѕһайом: 20рх Ө 20рх -20рх #000 іпѕеї, -20рх Ө 20рх -20рх 
#000 іпѕе+; 
І 


Получим: 


Путешествуйте с 


нами! 





Но главное, что без нашего вмешательства, за счет примене- 
ния стилей и технологий Вооѓѕїігар, это меню полностью адап- 
тивно. При уменьшении экрана получим: 


Путешествуйте с нами! 


Шаг 4. Создание адаптивного содержимого страниц 
с применением сетки Вооїѕігар. 

Пользуясь сеткой, сверстаем контент главной страницы, ко- 
торый должен состоять из трех колонок, каждая из которых со- 
держит картинку и ссылку на подробное описание. Каждая ко- 
лонка занимает треть ширины экрана, а, значит, 12/3 = 4 со]. 
Этот класс колонок и будем применять в строке (гоу), которая 
содержит основной контент страницы. Однако, так как все три 
колонки одинаковой ширины, вместо класса со|-4 можно при- 
менять просто класс со]. 





<!-- Начало всего блока с содержимым --> 
<та1п с1аѕ5 = "Яех"> 
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<1-- Начало первой строки в этом блоке --> 


<аіу с1аѕ5 = "гом" > 
<!-- Начало единственной колонки в первой строке --> 
<аіу с1а$$ = "со1"> 
Наши акции 
</аім> 
</аіу> 
<!-- Начало второй строки в этом блоке --> 
<аіу с1аѕ5 = "гом"> 
<!-- Начало первой колонки во Второй строке --> 
<аіу с1аѕ5 = "со1"> 


<!-- Создаем еще один блок, который объединит картинку 
и ссылку В этой колонке --> 


<аіу с1аѕ5 = "фоиг"> 
<!-- Выводим картинку --> 
«18 згс = "іте/сгітеа.јрв"> 
<р» 
<!-- С новой строки выводим ссылку --> 
<а с1аѕ5 = "ас 1а" Игеф = "#" >Подробнее об акции</а> 
</р> 
</аім> 
</а1\> 


<!--Аналогично описываем еще две колонки в пределах второй 
строки --> 


<А1у с1аѕ5 = "со1"> 
<аіу с1аѕ5 = "Жоиг"> 
<1и8 згс = "іт /Камка2.јрв"> 
<р> 
<а с1аѕ55 = "асЕ1а" Игеф = "#" > 
Подробнее об акции</а> 
</р> 
<!--Закрываем блок с картинкой и ссылкой --> 
</аіу> 
<1-- Закрываем колонку --> 
</аім> 
<А1у с1аѕ5 = "со1"> 
<аіу с1аѕ5 = "фоиг"> 
<іте 5с = "іте/а1+ау.јре"> 
<р> 
<а с1а55 = "асііа" һгеҒ = "#"> 
Подробнее об акции</а> 
</р> 
</аіум> 
</аіум> 


Незначительные переопределения стилей: 


/* Для класса Фоиг, который объединяет картинку и ссылку */ 
„Боцг { 
Богаег: $0114 #007196; 


} 
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/* Для картинок, но только входящих в блок класса Тоир */ 
.оиг іте { 

міаёһ: 250рх; 

һеірһё: 170рх; 

раааіпе: 5рх; 
} 
/* Для ссылок, но только входящих В блок класса Фоиг */ 
„Соиг а { 

браскегоипа-со1ог: #66СрАА; 

Бох-5Падош: 20рх @ 20рх -20рх #000 іпѕеї, -20рх Ө 20рх -20рх 
#000 іпѕе+; 

со1ог: мһі+е; 


} 


Получим следующий результат для полного экрана: 





Наши акции 
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Шаг 5. Добавление футера (нижней части каждой стра- 
ницы). 

Осталось только добавить ѓооѓег, чтобы страница получила 
законченный вид. 


<ҒооЁег с1аз5 = "Ғоо+ег" > 
<аіу с1аѕ55 = "гом" > 
<аіу с1аѕ5 = "со1"> 
Это сайт, предназначенный для обучения 
</а1\> 
</аім> 
</ Ғоо+ег> 


Стили, которые учитывают, что Ёооѓег должен быть «привя- 
зан» к нижней части экрана: 


/* Страница занимает 100% экрана по Высоте*/ 
Нт1 { 

һеієһі: 1007; 
} 


/* Тело документа имеет относительное позиционирование, но отступ 
для тела документа снизу больше или равен высоте футера */ 
Боау { 

тіп-һеірһћ:1007; 

роѕіїіоп:ге1а+іме; 

раа91п=-Бо тот: 7@рх; 


/* Подвал документа имеет абсолютное позиционирование, высоту 5@рх */ 
.Ғоо+ег { 

ро$11оп: абзо1и*е; 

Іеғі: е; 

гіеһі: 0; 

рої+от: е; 

һеіеһё: 50рх; 

со1ог:мћһі+е; 

баскегоипа-со1ог: #007196; 


Результат: 
утешествуите с нами! 





Наши акции 





Это сайт, предназначенный для обучения 
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Очевидно, что теперь для создания других страниц этого 
сайта можно использовать страницу ш4ех.В т] в качестве ша- 
блона, в котором нужно изменять только содержимое блока 
таіп. 

Для создания остальных страниц сайта рекомендуем ис- 
пользовать готовые компоненты Вооїѓѕїгар: формы, карточки, 
списки, кнопки и т. п., которые можно получить на странице 
ћегрѕ:/ /веіооѓѕігар.сот/осѕ /4.4/сотропепіѕ/. 


Тодт: @й Ббооокѕ 


Практическая работа № 4 
СОЗДАНИЕ ДИНАМИЧЕСКИХ ЭЛЕМЕНТОВ 
НА САЙТЕ С ПРИМЕНЕНИЕМ 
ЯЗЫКА ЈАМАЅСВІРТ 


Цель: Ознакомиться с возможностями языка ЈауаЅсгірі для 
клиентской обработки уеБ-страниц. 

Инструментарий: 1) Любой редактор программного кода, 
например, по{ераа- +; 2) любой современный браузер. 


ЗАДАНИЯ 


1. Добавить к сайту, созданному в предыдущей практиче- 
ской работе расчет и вывод стоимости тура. 

2. Придумать и выполнить аналогичные (по технологии) 
действия, имеющие смысл в контексте собственного приложе- 
НИЯ. 


Выполнение задания 1. 


Шаг 1. Создание кнопок для вызова скрипта. 
Предположим, что у вас имеется такая страница сайта, име- 
ющая имя іоиг.Һті!: 





А при изменении размера экрана страница будет выглядеть 
так: 
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Путешествуйте с 


нами! 


ЕСТ ГИ 


Наши туры 









Это прекрасная возможность отдохнуть всей семьей 


Рассчитать стоимость 
Ы ат 


Код этой страницы приведен ниже (только область таіп). 





<маіп с1аѕ55 = "ех" > 
<аӢіу с1аѕ55 = "гом" > 
<аіу с1аѕ5 = "со1"> 
Наши туры 
</аіу> 
</аім> 
<аіу с1аѕ5 = "сопЁаіпег-#иіа" > 
<аӢіу с1аѕ55 = "гом" > 
<аіу с1аѕ5 = "со1"> 
<аіу с1а55 = "Еоиг"> 
<іте 5с = "іте/сгітеа.јре" с1аѕ5 = "Фоиг іт" > 


<р>Это прекрасная возможность отдохнуть всей семьей</р> 
<!-- Код компонента кнопки Вызова модального окна 
Рооф5Егар со страницы РЕЪрз: / /детБооф$ гар. сот/4ос5/4.4/ 
сотропепт5/тоаай/. Значение аа а-тагдеЁ задайте свое! --> 
<Биїоп фуре = “БиЕфоп” с1аѕ5 = “ріп Бп-рг1тагу” 
Дафа-+0551е = “тода1” дафта-фагдеф = “#туМода1”> 
Рассчитать стоимость 


</Биоп> 
</91м> 
</аім> 
</аім> 
<аіу с1а$$ = "гом" > 
<аіу с1аѕ5 = "со1"> 
<аіу с1аѕ55 = "Еоиг"> 
<іте 5с = "іте/Каука2.јрев" с1аѕѕ5 = "+оиг іт" > 


<р>Море, солнце и горы! </р> 
<БиЕфоп уре = “риї+оп” с1а$$ = “Ьп Бп-рг1тагу” 
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Дафа-+о551е = “тода1” ааа-+агреї = “#туМода1”> 
Рассчитать стоимость 


</Биоп> 
</аіу> 
</аіу> 
</аіу> 
<аіу с1аѕ5 = "гом" > 
<А1у с1аѕ5 = "со1"> 
<аіу с1а55 = "Еоиг"> 
<іте 5гс = "іте/а1+ау.јре" с1аѕѕ = "Тоиг ітр"> 


<р> Незабываемые впечатления! </р> 
<Биёоп Фуре = “БиЕФоп” с1а55 = “Бп БЕп-ргітагу” 
даа-іорр1е = “тода1” аа+а-+агреї = “#туМода1”> 
Рассчитать стоимость 
</биТоп> 
</аіу> 
</аіу> 
</аіу> 
</аім> 
</аім> 
</та1п> 


То есть на странице есть три области, каждая из которых 
занимает строку целиком, в которой расположены картинка, 
некоторый текст и кнопка для расчета стоимости соответству- 
ющего тура. Нажатие на каждую кнопку должно вызывать от- 
крытие модального окна с идентификатором туМоаа!. 

Далее необходимо добавить стили к таблице стилей: 


.Ёоиг{ 
Богаег: $0114 #007196; 
таг51п: аи+о; 
һеієһі: 1007; 
/* установили Возможность использования технологии ћех */ 
915р1ау: Пех; 


/* указали направление расположения внутренних элементов - 
по строке (пом), и одновременно задали Возможность для них перено- 
ситься на другую строку при уменьшении экрана */ 

Яех-Яош: гом мгар; 


} 


„боиг іте { 
міаєһ: 250рх; 
һеірһё: 17@рх; 
райаіпе: 5рх; 
1 

„боиг р .+ои” іме { 
таг51т: 9 10рх; 
} 
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/* Для того, чтобы прижать кнопку к правому краю, если элемент, 
который нужно прижать к правому краю, не последний в контейнере */ 


„Бей { 
таг51п-1е%: ачцфо; 
огаег:999; 


браскегоипа-со1ог : #66СрАА; 

бох-ѕһайом: 20рх Ө 20рх -20рх #000 іпѕет, -20рх Ө 20рх -20рх 
#000 іпѕеї; 

со1ог:мћһі+е; 


} 


Шаг 2. Создание модального окна. 

Организуем вывод модального окна, которое открывает- 
ся после нажания на кнопку «Рассчитать стоимость». Это ок- 
но создадим с помощью Вооѓѕігар. Скопируем код модального 
окна (ћеєрѕ: / /веіооѓѕігар.сот/0с5 /4.4/сотропепіѕ/тоаа!1/) 
в верхнюю часть кода страницы. 


<Боду с1аѕѕ = "броау-+ор"> 
<!-- МоааЁ --> 


<!-- Укажите 1а этого модульного окна таким же, как был параметр 
Чафа-тагдеф в кнопке его Вызова на предыдущем шаге --> 


<аіу с1аѕ5 = "тоаа1 Ғайе" іа = "туМода1" +аріпаех = "-1" 
го1е = "аіа1ов" 

агіа-1абе11еабру = "ехатр1еМода15сго11аБ1еті1е" 
агіа-һіааеп = "гие" > 

<аіу с1аѕ5 = "тоаа1-діа1ор тода1-91а105-5сго11аб1е" го1е = 

"Яоситепі" > 

<аіу с1аѕ5 = "тода1-сопфеп*"> 
<аіу с1аѕ5 = "тода1-пеадег"> 


<ћ5 с1аѕ5 = "тода1-%1*%1е" 
14 = "ехатр1еМода15сго11аб1ІетТі+1е"›Мойа1 їі+1е</һ5> 


<Биёёоп Журе = "Би оп" с1аѕ5 = "с1оѕе" 
Дафа-91$т1$5$ = "тоЧа1" агіа-1абе1 = "С1оѕе"> 
<ѕрап агіа-һіааеп = "гие" >&{1те5;</зрап> 
</бриъоп> 
</аіу> 
<аіу с1аѕ5 = "тода1-Боду"> 
</аім> 
<аіу с1аѕ5 = "тода1-Коофег"> 
<Биефоп Журе = "биётоп" с1аѕ5 = "реп Бп-зесопдагу" дафа- 
9151155 = "тода1" >С1оѕе</биоп> 
<Биефоп Журе = "Биефоп" с1аѕ5 = "ріп Бёп-ргітагу" >5ауе 
спапве$< /БиФоп> 
</аім> 
</аіу> 
</аіу> 
</аіу> 
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В результате, при нажатии на любую из кнопок Рассчитать 
стоимость» должно получиться: 


Мода! їе 





То есть в Вооѓѕігар уже созданы все необходимые С$8 и Ј8- 
скрипты, которые организовывают вывод этого пустого мо- 
дального окна. 

Шаг 3. Создание собственной формы в модальном окне. 

Создадим в модальном окне форму для запроса у пользо- 
вателя необходимых нам данных для расчета стоимости тура. 
Предположим, что пользователь должен выбрать название ту- 
ра, дату заезда, количество участников. 


<1-- Начало описания модального окна Бооф$фгар --> 
<аіу с1аѕ5 = "тода1-Бо4у" ѕ?Ту1Іе = "тах-міаєһ: бӨөрх" > 
<1-- Начало формы --> 
<Ғогт теЄһоа = "ре" асёіоп = "#" іа = “огдегРогт”> 

<!-- Далее в блоках класса Фоиг (для того, чтобы к ним были при- 
менены те же стили, что и на основной странице сайта) описываются 
поля формы для ввода данных. В том числе: поле для выбора страны 
(идентификатор, который будет использоваться для дальнейшей обра- 
ботки - іпр1); поле для ввода даты (тип - Яаёе, идентификатор - 
1пр2); поле для выбора количества участников тура (идентификатор 
іпрз) и поле для ввода ета1Ё пользователя, идентификатор іпр4 --> 


<аіу с1а$$ = "фоиг"> 
<1абе1 с1аѕ5 = "1абе1" Фог = "паме" > 
Выберите тур: 
</1абе1> 
<!-- 1а формы (огаегЕРогт) будет использоваться в скрипте обра- 
ботки формы, рассматриваемом ниже --> 
<ѕе1есі іа = "іпр1"> 
<оріїіоп уа1ие = "Крым" ѕе1есёеЯӣ> 
Крым 
</ор1оп> 
<орёіоп уа1ие = "Кавказ"> 
Кавказ 
</ор1оп> 
<оріїіоп уа1ие = "Алтай" > 
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Алтай 
</оріїіоп> 
</ѕе1есі> 
<аіу> 
<аіу с1аѕ5 = "+оиг"> 
<Іаре1 с1аѕ5 = "1аре1" Рог = "аата" > 
Выберите дату начала: 
</1абе1>» 
<іпри Журе = "ае" 14 = "іпр2"> 
</аіум> 
<аіу с1аѕ5 = "+оиг"> 
<Іаре1 с1аѕ5 = "1абе1" Ғог = "питбег" > 
Выберите количество участников: 
</1абе1» 
<ѕе1Іесі іа = "іпрз">» 
<орііоп уа1ие = "1" >1</ор№іоп> 
<оріїіоп уа1ие = "2" ѕе1есёеӣ>2</орііоп> 


<орііоп уа1ие 
<оріїіоп уа1ие 
</ѕе1есі> 
</аім> 
<аіу с1аѕ5 = "фоиг"> 
<Табе1 с1а$$ = "1абе1" Фог = "ета11"> 
Ваш Е-та11: 
</1аБе1> 
<1при фуре = "ета11" іа = "іпр4" с1аѕ5 = "іприё-х1агве" $з%у1е 
= "міаёћһ: 350рх;" геди1гея = "гедиігеа" > 
</аім> 
<!--ОБРАТИТЕ ВНИМАНИЕ! Для упрощения обработки, перенесите 
кнопки управления Закрыть и Отправить из футера модального окна 
6 форму. Футер модального окна при этом можно удалить --> 
<рићоп Журе = "Би{Фоп" с1аѕ5 = "Бп Бп-рг1тагу" аафа-91$т1$$ = 
"тоаа1" >Закрыть< /Би{оп> 
<БиЕфоп уре = "ѕирті" с1аз5 = "Бп Б%п-рг1тагу" іа = 
"ѕибрті+" >Отправить< /БиЕФоп> 
</Ғогт> 


"3">3</орёіоп> 
"3">4</орііоп> 


В результате при нажатии любой из кнопок вы получите мо- 
дальное окно «Расчет стоимости тура». 


Расчет стоимости тура х 


Выберите тур: Крым , 


Выберите кол! Алтай частников: , 


Закрыть 
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Шаг 4. Создание скрипта для обработки формы, запол- 
ненной пользователем в модальном окне. 

Напишем скрипт на ЈауаЅ$сгірї с применением возможностей 
библиотеки чету, который позволит обработать данные, вве- 
денные пользователем в модальное окно и показать результат. 

В нижней части страницы (оигѕ.һті, после строк подклю- 
чения библиотек нужно ввести следующий код: 


<5сг1ре> 
<!-- 70иегу позволяет обращаться прямо к идентификатору формы. 
По событию связанному со срабатыванием кнопки 5ибттТф на форме, 
Выполняется следующая функция --> 
$ ('#огаегЕогт? ) .оп(' ѕирті', ФипсЕ топ () 
{ 
<!-- получаем название тура --> 
Іеі +оиг = $("#1пр1").\а1(); 
<!-- получаем дату --> 
Іеї дафе = пем Бафе($("#1пр2").\а1()); 
<!-- получаем месяц из даты --> 
Іеї топЁһ = дае. реЕМопЁћһ (); 
<!--получаем количество участников тура и преобразуем его 
в число --> 
Іеї Ко1 = $("#іпрз").ма1(); 
Ко1 = Митбег(Ко1); 
<!-- получаем етаїі --> 
Іеї ета11 = $("#1пр4").\а1(); 
<!-- Выполняем некоторый условный расчет, например, если тур 
6 Крым, то В определенные месяцы цена выше, а в остальные - ниже 


--> 
Іеї ѕ+оіт = Ө; 
ЇҒ (Фоиг == 'Крым') 
{ 
іҒ((топЁһ == 5) | | (топёһ == 6) | | (топёһ == 7) | | (топёһ == 8)) 
{ѕоіт = Ко1*500; } 
е15е {ѕ+оіт = Ко1*300; } 
} 
1+ (Фоуг == 'Кавказ') 
{ 


і( (топЁћ == 12) | | (топи == 1) | | (топһ == 2) | | (топһ == 
5) | | (топЕћ == 6) | | (топһ == 7) | | (топћ == 8)) 
{ѕ1оіт = Ко1*300; } 
е1ѕе {$5%о01т = Ко1*250; } 


} 
1+ (Фоцчг == 'Алтай') 
{ 

{ѕ№оіт = Ко1*1000; } 
} 
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<!-- Выводим полученный результат --> 
а1егі (` Примерная стоимость вашего тура на ${Ко1} человек 
составит ${5+01т} у.е. Мы свяжемся с ВАМИ!!`); 


} 
); 


</$сг1ре> 
В результате получим следующее: 


Подтвердите действие 


Примерная стоимость вашего тура на 2 человек составит 600 у.е. 


Мы свяжемся с ВАМИ!! 


Тот: © бооокѕ 
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Практическая работа № 5 
СОЗДАНИЕ БАЗЫ ДАННЫХ ДЛЯ САЙТА 


Цель: ознакомиться с возможностями хранения данных сай- 
та в базе данных СУБД Му$01.. 

Инструментарий: 1) любой редактор программного ко- 
да, например, поѓераа+ +; 2) любой современный браузер; 
3) пакет разработчика Ореп Ѕегуег (можно бесплатно скачать 
на сайте ћіїрѕ: / /оѕрапе1.іо/аоупоаа/). 


Задания 


1. Развернуть локальный уеБ-сервер и создать на нем базу 
данных для сайта Путешествуйте с нами. База данных должна 
позволять регистрироваться и авторизоваться пользователям 
и оставлять отзывы. 

2. Придумать и выполнить аналогичные (по технологии) дей- 
ствия, имеющие смысл в контексте собственного приложения. 


Выполнение задания 1. 


Шаг 1.Установка среды разработки. 

Скачайте с сайта пакет разработчика Ореп Ѕегуег и устано- 
вите его на своем компьютере. По окончании установки вы уви- 
дите в указанной для установки папке следующую структуру: 


диск (Е) > оѕ > ОЗРапе > 
Имя 
1 аотаіпѕ 
1 тодшез 
А изегдача 
о Ореп Зегуег хб4.ехе 
о Ореп Ѕегмег х86.ехе 


Для загрузки сервера необходимо запустить один из ехе- 
файлов, соответствующих вашей версии операционной систе- 
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мы. После этого в панели задач Міпаомѕ вы должны увидеть 


красный флажок: 
: Ореп $егуег 5.2.2 
Профиль: Оеѓаиії 






Далее необходимо нажать этот флажок, что приводит к по- 
явлению меню работы с данным пакетом разработчика: 





Запустить 


Перезапустить 


| Остановить 
| 
| Мои сайты › 
Дополнительно › 
| 
Мои закладки › 


Мой компьютер 
Папка с сайтами 
Просмотр логов 


Настройки 


Выход 


мосБЕБШЬ Ө 222 





Очевидно, что для запуска сервера нужно выбрать зеленый 
флажок. 

Теперь для проверки работы нужно в этом меню выбрать: 
Мои Сайты, Іоса!ћоѕі. При этом вы должны увидеть окно при- 
ветствия в браузере. 

Пакет разработчика Ореп Ѕегуег содержит программу-интер- 
претатор для РНР (см. тему 6) и СУБД МуѕЅ0І. с возможностью 
управлять ею через специальную программу, которая называ- 
ется РНРМУАатіп. Для загрузки этой программы необходимо 
выбрать в меню Ореп5егуег: Дополнительно, РНРМуАйтт 
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Шаг 2. Создание Базы данных. 

При входе система запросит логин и пароль. Как правило, 
логин — гоої, а поле пароль нужно оставить пустым. 

Теперь мы попали в среду СУБД МуУ5ОГ. Здесь мы будем соз- 
давать базу данных для сайта. 

Выберем в меню Базы данных и заполним его так: 


Базы данных |>} $01. 1% Состояние = Пользователи - Экс 


Базы данных 


о Создать базу данных #3 





{гауе! [ У {8 _депега!_сі "| Создать 





При нажатии на кнопку Создать вы увидите новую ба- 
зу данных в левой части экрана. Дважды щелкнем по имени 
{гауе], чтобы попасть в окно редактирования этой базы данных. 

Шаг 3. Создание таблии в базе данных. 

Сначала создадим таблицу для регистрации пользователей. 

Нажмем на кнопку Создать таблицу. 

Введем имя таблицы, например, иѕегѕ, укажем количество 
столбцов (4 — Порядковый номер, Имя, Логин, Пароль). 

После создания, заполняем полученное окно, например, так: 


Имя таблицы: изегз Добавить 1 поле(я) ок 


Структура 34 
Имя Тип ўў Длина/значения По умолчанию з: Сравнение Атрибуты Ми Индекс 
ЕЈ 
10 ІМТ ы Нет Ы ив депега! с " Я РЕМАВУ 
Мате МАКСНАК. "| [30 Нет 
МАВСНАВ 4 20 Нет 


іодіп 


Раѕѕ МАВСНАВ "Мо Нет 


Таким образом, Ш будет содержать порядковый номер за- 
регистрированного пользователя, это поле будет первичным 
ключем таблицы (РКІМАКҮ). Далее отметим галочкой поле 
Апџгсо_ Іпсгетепі, для того, чтобы порядковые номера заполня- 
лись автоматически, по мере регистрации пользователей. 

Остальные поля будут текстовыми. В поле длина устанавли- 
вается длина поля в символах (максимально необходимая для 
хранения данных в этом поле, например, логин не может пре- 
вышать 20 символов). 
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После сохранения появится пустая таблица иѕегѕ. Если впо- 
следствии нужно будет вносить изменения в состав или опи- 
сания полей, в меню выбирается режим Структура. Для за- 
полнения этой таблицы данными выбираем режим Вставить. 
Для просмотра — режим Обзор. 

Попробуйте вставить сведения о некоторых пользователях 
и просмотреть полученную таблицу. 


10 114011) 


Мате уагсһаг(30) И 
ван 


Ёодт уагсһаг(20) 
Імап_111 


Раз$ үагсһаг(20) 
11111 


ок 


0 Игнорировать 
Поле Тип Функция Мий Значение 
10 11) 


Мате уагсһаг(30) 
Петр 


Код магсваг(20) = 
Рег_222 


Раѕѕ уагспаг(20) 


22222 


ок 


После выбора опции Просмотр в меню должно получиться 
примерно так: 


+ Параметры 
< Г У Ш Мате Годт Раѕѕ 


С] &7 Изменить 3 Копировать @ Удалить 1 Иван Іуап_111 11111 
С] «’ Изменить Ҙє Копировать @ Удалить 2 Петр Реіг_ 222 22222 


Вы можете заметить, что поле Ш заполнилось порядковыми 
номерами пользователей автоматически. 

Также вы можете видеть, что пароли пользователей хранят- 
ся в базе данных в незашифрованном виде. Это, безусловно, 
неправильно, но решение этой проблемы не входит в задачи 
данного курса. 

Теперь создадим еще одну таблицу для сохранения отзывов 
зарегистрированных пользователей. Каждый пользователь мо- 
жет оставлять множество отзывов. Поэтому структура второй 
таблицы Кетагкѕ будет следующей: 
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Имя таблицы: |геглагК$ Добавить |1 поле(я) ок 


Имя Тип © Длина/значения По умолчанию ‹› Сравнение 
ч 


ІО чзег ІМТ Нет 
бата ТЕХТ Нет 
ач ТЕХТ Нет 





Обратите внимание: в эту таблицу входит такое же по- 
ле Ір иѕег, как и в первую, но в этой таблице оно не является 
уникальным (ключевым), потому что значение этого поля мо- 
жет повторяться. Каждый пользователь из таблицы иѕегѕ мо- 
жет оставлять много отзывов, которые будут привязаны к его 
Ір _иѕег в таблице гетагкѕ. Следовательно, не нужно устанав- 
ливать для этого поля в этой таблице параметры РКІМАКҮ 
и АОТО ІЧСКЕМЕМТ. 

Заполним для примера и эту таблицу: 


10 _изег 1п(11) 





{ета {еж Бтзые о тура 











{ед {еж Мне очень понравилось! 


Таким же образом можно было бы вставить еще множество 
отзывов от пользователя с Ір _иѕег 1, от пользователя с Ір иѕег 
2 ит. д. 

Но наша задача — заполнять эти таблицы через сайт. Этим 
мы займемся в следующей практической работе. 
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Практическая работа № 6 
РАБОТА С БАЗОЙ ДАННЫХ САЙТА 
С ИСПОЛЬЗОВАНИЕМ ЯЗЫКА РНР 


Цель: ознакомиться с возможностями работы с базой дан- 
ных посредством запросов в РНР-скриптах. 

Инструментарий: 1) любой редактор программного кода, 
например, поѓіераа+ +; 2) любой современный браузер; 3) па- 
кет разработчика Ореп $егуег. 


Задания 


1. Создать формы для регистрации, авторизации и отправки 
отзывов пользователей. Написать программы для регистрации 
и авторизации пользователей, а также для обработки функции 
сохранения отзывов и просмотра их на одной из страниц сайта. 

2. Придумать и выполнить аналогичные (по технологии) 
действия, имеющие смысл в контексте собственного приложе- 
НИЯ. 


Выполнение задания 1 


Шаг 1. Настройка проекта в среде иеВ-сервера. 

С этого момента наш сайт будет работать под управлени- 
ем локального међ-сервера. Поэтому папку со всеми файлами 
сайта (в данном случае #‘ауе[ копируем в папку сервера: [Ваш 
диск: \[Ваша папка сервера]\ О$Рапе!\дотат5\ 

Для запуска сайта в меню Ореп Ѕегуег нужно выбрать Мои 
сайты, гау@. 

Важно, чтобы все страницы сайта были сохранены в коди- 
ровке ОТЕ-8 без ВОМ. 

Шаг 2. Создание сессии. 

Вы замечали, что после регистрации пользователя на сайте, 
в дальнейшем ему нужно только авторизоваться (то есть ввести 
логин и пароль) для того, чтобы система узнавала его и предо- 
ставляла конкретно этому пользователю дополнительные воз- 


169 


Тодт: @й Ббооокѕ 


можности. В нашем случае — это возможность оставить отзыв. 
Для постоянного взаимодействия с авторизованным пользо- 
вателем нужно использовать механизм сессий. При автори- 
зации пользователя сервер генерирует и запоминает уникаль- 
ный ключ — идентификатор сессии, и сообщает его браузеру, 
затем браузер сохраняет этот ключ и при каждом последующем 
запросе отправляет его серверу, чтобы он «понимал» с каким 
пользователем происходит это взаимодействие. То есть при за- 
грузке сайта должна стартовать новая сессия. 

Поэтому теперь пересохраним файл іпдех.һҺт с расширени- 
ем .рһр и сделаем его главной точкой входа на сайт. Файл шаех. 
ће теперь можно удалить. Естественно, все ссылки на всех 
страницах, которые вели раньше на страницу шаех.В 11|, долж- 
ны теперь вести на страницу іпӣех.рһр. 

В начало страницы шаех.рЮр вставьте следующий код: 


<?рһр 
// Запускаем сессию 
ѕеѕѕіоп ѕЁагі(); 

?> 


Шаг 3. Создание подключения к базе данных. 
В папке проекта (теперь все делаем в папке на меБ- 
сервере) создайте файл аБсоппесі.рһр следующего содержания: 


<?рһр 
/* Создаем новое подключение к серверу Госаіһоѕ+ и базе данных 
фгауеЁ на нем. Если вы не указывали ничего дополнительно при соз- 
дании Вашей базы данных, то имя пользователя будет гоо, а пароля 
не будет */ 

$туѕ911 = пем туѕ911('1оса1һоѕ', 'гоо', ", 'Ёгауе1'); 
// Проверяем, прошло ли подключение без ошибок 
1+ ($туза11->соппес* еггог) 
{ 

аіе(' Соппесе Еггог ('.$ту$911->соппесЕ еггпо.') '.$туза11- 
>соппес*_еггог); 


} 


2> 


Это файл мы будем подключать к работе всегда, когда будет 
требоваться связь с базой данных. 

Шаг 4. Создание области регистрации и авторизации. 

На главной странице таех.рйр после области заголовка 
должна быть реализована область, которая содержит: 
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1 вариант — кнопки «Регистрация» и «Авторизация»; 

2 вариант — кнопки «Оставить отзыв» и «Выйти» (если 
пользователь авторизовался). 

Поэтому добавим к коду страницы таех.рйр после области 
с заголовком сайта следующий фрагмент: 


<Пеадег> 


<?рһр 

/* Если пользователь еще не авторизован на сайте, его переменные 
сессии (мы организуем их позже) пока пусты, нужно вывести ссылки 
на регистрацию или авторизацию */ 

1+ (етрїіу(% 5Е55ІОМ№М[ '1оріп']) ог етр+у(% 5Е5510№['іа'])) 

{ 
?> 
// скрипт прерывается и следует обычный ҺЕті -код 
<аіу іа = "аиёһ Б1оск"> 


<аіу іа = "1Ііпк_ геріѕћег"> 
<а ҺгеҒ = "геріѕіг.рһр">Регистрация</а»> 
</аім> 
<аіу іа = "1Ііпк аиёһ"> 
<а Иге+ = "ауфог.рИр" >Авторизация</а> 
</а1\> 
</а1\> 
// скрипт снова начинается, чтобы обработать Вариант е[ѕе 
<?рһр 
} 


/* Если пользователь уже авторизован, нужно Выводить ссылки 
на страницу, где можно оставить отзыв, или на страницу, которая 
позволит Выйти из авторизации */ 


е1ѕе 
{ 
?> 
<аіу іа = "ехіє Б1оск"> 
<аіу іа = "1іпк гемагк" > 
<а һге?Ғ = "гетагкѕ.рһр">Вы можете оставить отзыв</а> 
</аім> 
<аіу іа = "1іпк_ехії"> 
<а Игеф = "ехіё.рһр">Выход</а» 
</аім> 
</аіу> 
<?рһр 
} 
?> 


Добавьте самостоятельно в таблицу стилей описание, кото- 
рое позволит этим ссылкам быть более заметными на фоне за- 
головка. 
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Получим примерно такой результат (пока пользователь 
не зарегистрирован или не авторизован): 


ПУТЕШЕСТВУЙ С 


НАМИ! 


Регистрация 
Авторизация 





В дальнейшем обработка каждой функции будет проходить 
по одной и той же схеме (использованы материалы с сайта 
Берз: //гизеПег.сот): 

— ссылка на главной странице ведет на соответствующую 
РНР-страницу для заполнения формы; 

— кнопка на этой форме запускает РНР-страницу- 
обработчик для этой формы; 

— в конце этого обработчика располагается ссылка для воз- 
врата на одну из страниц для продолжения работы с сайтом. 

Шаг 5. Реализация функции регистрации пользователя. 

Создадим РНР-файл для регистрации. Согласно ссылкам, его 
имя должно быть гесіѕірһр. Создадим под этим именем новый 
файл следующего содержания: 


<Һетм1> 
<Веад> 
<{1{1е>Регистрация< /{1{1е> 
</һеаа> 
<Боау»> 
<ћ2>Регистрация</һ2> 
<!-- Начало формы регистрации. зауе_изег.рйр - это адрес обра- 
ботчика, то есть после нажатия на кнопку "Зарегистрироваться" дан- 
ные из полей будут переданы файлу ѕауе иѕеғ.рһр методом "роѕї" --> 
<Ғогт асёіоп = "заме иѕег.рһр" тефНоЯ = "ро${"> 
<!-- В текстовое поле с именем пате пользователь 6водит свое 
имя --> 
<р> 
<1абе1>Ваше имя: <6г></1абе1> 
<1приЕ паме = "пате" уре = "ех" ѕіғе = "15" мах1епёеИ = 
"А52" 
</р> 
<!-- В текстовое поле с именем (одіп пользователь 6водит 
свой логин --> 
<р» 


<1абе1>Ваш логин: <Бг></1аре1> 
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<іприє пате = "1оріп" Журе = "Техї" ѕіле = "15" тах1епеһ 
= "15" 
</р> 
<!-- В поле для паролей с именем раѕѕ пользователь вводит 
свой пароль --> 
<р> 
<1абе1>Ваш пароль: <6г></1аБе1> 
<1приЕ паме = "раз5" %уре = "раѕѕмога" ѕіғе = "15" 
тах1епёЕИ = "15"> 
</р> 
<!-- Кнопкой (уре = "зирттТЕ") пользователь сможет отправить 
данные на обработку файлу 5ауе_изег.рйр --> 
<р» 
<іприё Журе = "ѕиртії" пате = "ѕирті" уа1ие = "Зареги- 
стрироваться" > 
</р> 
</фогт> 
</Боау> 
</ћЕт1> 


При нажатии на кнопку Регистрация пользователь увидит 
такую страницу: 


Регистрация 


Ваше имя: 














Ваш логин: 











Ваш пароль: 














Зарегистрироваться 











Задание стилей этой формы или ее оформление в стиле все- 
го сайта остается для самостоятельного выполнения. 
Далее необходимо написать страницу обработки ѕауе иѕег. 


рћһр. 
<?рһр 


/* сохраняем введенное пользователем в форме имя в переменную 
$пате, если оно пустое, то уничтожаем переменную */ 
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1+ (155е+(% РО5Т['пате'])) { 
$пате = $_РОЗТ[ 'паме']; 
1+ (Фпате == ") { 
ипѕеї ($пате) ; 
} 
} 


/* сохраняем введенный пользователем в форме логин в переменную 
$1091іп, если он пустой, то уничтожаем переменную */ 

1+ (155е&($ РОЅТ[ '10ріп'])) { 

$10811 = $ РОЅТ[ '1оріп']; 

1+ ($1оріп == ") { 

ип5е* ($1051п); 

} 

} 


/* сохраняем введенный пользователем пароль в форме в переменную 
$раѕѕ, если он пустой, то уничтожаем переменную */ 

1+ (іѕѕе+($ РОЅТ['раѕ5'])) { 

$раѕ5 = $ Р0О5Т['раѕ5']; 

іҒ ($раѕѕ ==") { 

ипѕе& ($раѕѕ); 

1 

} 


/* если пользователь не Ввел логин или пароль, то выдаем ошибку 
и останавливаем скрипт */ 

1+ (етр+у($1оріп) ог етр+у(Фраѕѕ)) 

ехії ("Вы ввели не всю информацию, вернитесь назад и заполните 

все поля!"); 

/* подключаемся к базе данных, Выполняем Вв этом месте ранее соз- 
данный файл арсоппесЕ.рһр */ 

іпс1иае ("абсоппес*.рИр"); 


/* Проверяем существование в базе данных пользователя с таким 
же логином. Ищем Вв таблице изег$ строку, где логин совпадает 
с тем, который ввел пользователь, и, если находим, то сохраняем 
его ІР в переменной $гезий т */ 

$ге5и1* = Фтуѕда1і->аоегу("ЅЕГЕСТ ТО ЕВОМ иѕегѕ МНЕВЕ 1оріп = 
"$10ріп' "); 


/* Преобразуем полученный набор данных В ассоциативный массив */ 
$тугом = $гези1{->РефсН_а$$0с(); 


/* Проверяем, не пусто ли 6 этом ассоциативном массиве значение 
поля с ключом Ір. Если не пусто, то такой пользователь уже есть 
6 базе данных */ 
1+ (! етрёу ($тугом[ '1р'])) { 
ехії ("Введенный вами логин уже зарегистрирован. Введите дру- 
гой логин. "); 


| 
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// если такого нет, то сохраняем данные нового пользователя 
6 таблицу и5ег5 

$геѕи1+2 = $туза11->ачегу ("ІМЅЕКТ ТМТО изег$ (Маме, Горіп, 
Раѕ5) \АШОЕ$ ("$пате' , '$1оріп', '$раѕ5')"); 


// Проверяем, есть ли ошибки 


1+ ($гези142 == 'ТВУЕ') { 
есһо "Вы успешно зарегистрированы! Теперь вы можете зайти 
на сайт под своим именем. <а Пгеф = '1паех.рНр'>Главная страницах / 
а>"; 
} 
е1ѕе { 
есһо "Ошибка! Вы не зарегистрированы. "; 
} 
?> 


Перейдите на форму регистрации, заполните ее и убедитесь 
в том, что новая строка появилась в базе данных в таблице 
иѕегѕ. 

Шаг 6. Реализация функции авторизации. 

После успешной регистрации пользователь может перейти 
с главной страницы по ссылке Авторизация. При этом он дол- 
жен ввести свой логин и пароль, и если в таблице иѕегѕ будет 
строка с такими же логином и паролем, то пользователю долж- 
на стать доступна какая-либо дополнительная функция сайта. 
В нашем случае при переходе на главную страницу он должен 
увидеть ссылки «Оставить отзыв» и «Выйти». 

Создаем форму авторизации (ауѓогрћр): 


<ћетм1> 
<һеаа»> 
<+1{1е>Авторизация< /{1*1е> 
</Неаа> 
<Боау> 
<ћ2>Авторизация</һ2> 
<!-- Начало формы авторизации. Ее5Е иѕег.рһр - это адрес обра- 
ботчика, то есть после нажатия на кнопку “Войти” данные из полей 
передаются обработчику Ее5{ изег.рйр методом “роз” --> 


<Фогт ас 1оп = "Фез®_изег.рбр" тефпоЯ = "роѕі" > 
<!-- В текстовое поле с именем [о091п пользователь вводит 
свой логин --> 
<р» 
<1абе1>Ваш логин: <6Бг></1абе1» 
<іпри паме = "1Іоріп" уре = "ех" ѕіғе = "15" тах1Іепеїћһ 
= "15"> 
</р> 
<!-- В поле для паролей с именем раѕѕ пользователь вводит 


свой пароль --> 
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<р» 
<1абе1>Ваш пароль: <6г></1аБе1> 
<іприє пате = "раѕ5" уре = "ра$$мога" ѕіле = "15" 
тах1епёЕИ = "15"> 
</р> 
<!-- Кнопка (фуре = "ѕиБті") отправляет данные обработчику 
Тез и5ег.рйир --> 
<р> 
<1приЕ фуре = "ѕибтії" пате = "ѕибртіЄ" уа1ие = "Войти" > 
</р> 
</Рогт> 
</Боау> 
</Нт1> 
Результат: 
Авторизация 
Ваш логин: 














Ваш пароль: 














Войти 











Создаем файл-обработчик (Ее5Ё_изег.рйр): 
<?рһр 


// Обязательно запускаем сессию! 
ѕеѕѕіоп ѕ+агі(); 
// Сохраняем введенные пользователем логин и пароль в переменные 
$[одлпт и $раѕѕ 
1+ (155е1(% РОЅТ[ '10ріп'])) { 
ф1оріп = $ РОЅТ['1овіп']; 
1+ ($1оріп == ") { 
ипѕеї ($1021п); 
, 
} 
1+ (іѕѕе+($ РОЅТ['раѕ5'])) { 
$раѕ5 = $ Р0О5Т['раѕ5']; 
1+ ($раѕ5 ==") { 
ипѕе+($раѕѕ); 
} 
} 


// Если пользователь не ввел логин или пароль, то выдаем ошибку 
и останавливаем скрипт 
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1+ (етр+у($1оріп) ог етр+у(Фраѕѕ)) { 
ехії ("Вы ввели не всю информацию, вернитесь назад и заполните 
все поля! "); 
} 
// Подключаемся к базе 
іпс1иае ("абсоппес*.рйИр"); 
// Извлекаем из базы все данные о пользователе с введенным логи- 
ном 
$гези1+ = $туѕда11і->доегу("ЅЕГЕСТ * ЕВОМ изег$ МНЕВЕ 1оріп = 
'"$10оріп'"); 
// Помещаем эти данные 6 ассоциативный массив 
$тугом = фгеѕи1+->Ғеїсһ аѕѕос(); 
// Проверяем, существует ли пользователь с таким логином 
1+ (етр+у($тугом[ 'Горіп'])) { 
ехі ("Введенный вами 1оріп или пароль неверный." ); 
} 


е15е { 
// Если пользователь в базе существует, то сверяем пароли 
1+ ($тугом['Ра$$'] == $раз$) { 

/* Если пароли совпадают, то запускаем пользователю сессию. Это 
означает, что В специальных сессионных переменных сохраняются Важные 
сведения об этом пользователе, в данном случае - Ір и логин */ 

$ ЅЕ55ТОМ[ '1оріп'] = Фтугом[ 'Гоё1п' ]; 

$ ЗЕЗЗТОМ[ '14'] = Фтугом[ ' ТО']; 

// Выводятся соответствующие сообщения пользователю 


есһо "Вы успешно вошли на сайт! <а Пге{ф = 'іпаех. 
рһр'>Главная страница</а»"; 
} 
е1ѕе { 


// Если пароли не сошлись 
ехі ("Введенный вами 1оріп или пароль неверный."); 


} 
} 


?> 


Перейдите по ссылке Авторизация и введите один из логи- 
нов и паролей зарегистрированных ранее пользователей. Убе- 
дитесь, что функция работает. 

Убедитесь в том, что теперь после перехода на главную стра- 
ницу ссылки «Авторизация» и «Регистрация» заменены на ссыл- 
ки «Вы можете оставить отзыв» и «Выйти». Это произошло по- 
тому, что переменные сессии теперь не пусты, и это условие 
сработало при загрузке страницы. 

Шаг 7. Реализация функции «Оставить отзыв». 

Создадим форму для отзыва (файл гетагкѕ.рһр) 


<ћёт1> 
<һеаа» 
<+1{1е>Отзывых< /{1+1е> 
</һеаа» 
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<Боау> 
<һ2>0ставьте свой отзыв</һ2> 
// Форма будет обработана файлом зауе_гетагЕ5.рИр 
<Ғогт асёіоп = "заме _гетагК$.рИр" теһоа = "роз" > 
<!-- В текстовую область (пате = “фета”) пользователь вводит 
тему своего отзыва --> 


<р> 

<1абе1>Тема сообщения: <Бг></1ађбе1> 

<іехіагеа паме = "%ета" со1$ = "38" гом$ = "3"></{ехфагеа> 
</р> 


<!-- В текстовую область (пате = “ЕехЕ”) пользователь вводит 
текст своего отзыва --> 
<р» 
<1абе1>Введите текст сообщения: <6г>< /1аБе1 > 
<фехфагеа пате = "Фехі" со15 = "38" гом$ = "6"></{ехфагеа> 
</р> 
<!-- Кнопка отправляет данные на страницу-обработчик $ауе_ 
пгетағеѕ.рһр --> 
<р> 
<іпри Журе = "ѕибрті" пате = "ѕибртії" уа1ие = "Сохра- 
нить" > 
</р> 
</Рогт> 


И, наконец, файл-обработчик 5ауе_тетатК$.рйр. Этот файл 
должен сохранить введенный отзыв в таблице гетагкѕ нашей 
базы данных и перенаправить пользователя на страницу (на- 
пример сопасё5.рйр), где будут выведены все имеющиеся в базе 
данных отзывы. 


<?рһр 
// Старт сессии 
ѕеѕѕіоп ѕЁагі(); 
/* Получаем из формы и сохраняем в соответствующих переменных Ввве- 
денные тему и текст отзыва */ 
1+ (155е+(% РОЅТ[ '+ета'])) { 
$Еета = $ РОЅТ[ 'ета']; 
1+ (Фета == '') { 
ипѕеї (Фета); 
} 
} 
1 (155е(% РОЅТ['©ехї'])) { 
$ЕехЕ = $ РОЅТ[ '{ех*']; 
1+ ($%ехЕ == '') { 
ипзе* ($4ехе); 
} 
} 


// Если пользователь не ввел тему или текст, то Выдаем ошибку 
и останавливаем скрипт 
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1+ (етр+у($+ета) ог етр+у(Ф%ех+)) { 

ехії("Вы ввели не всю информацию, вернитесь назад и заполните 
все поля!"); 
} е1ѕе { 

// Если тема и текст Введены, то сохраняем сообщение в таблицу 
гетаге$ БД фгауе 

// Подключаемся к базе 

іпс1иае("абсоппесЕ.рһћр"); 

// Если не пуста переменная сессии, сохраняем Ір текущего поль- 


зрвателя 
1+ (!етр+у(% 5Е55І0М['14'])) { 
$Коа = $ 5Е55ТОМ[ '14']; 


// Сохраняем данные 
фгеѕи1+ = $туѕд11->диегу("ІМЅЕКТ ТМТО гемагкѕ (ТО_изег, фета, 
+ехі) \АГИЕЗ ('$Коа' , '$+ета', '$%№ехі')"); 
// Проверяем, нет ли ошибки 
1+ ($гези1 == 'ТКУЕ') { 
// Перенапрабляем пользователя на страницу просмотра отзывов 
есһо "Ваше сообщение сохранено! Перейти к просмотру сообщений. 


<а Пге+ = 'сопёасїѕ.рһр'>0 нас</а>"; 
} е1ѕе { 
есһо "Ошибка! Сообщение не сохранено"; 
} 
} 
} 
р 


Страница просмотра всех отзывов, которые имеются в БД, 
может быть организована на одной из страниц сайта. Напри- 
мер, если нужно просматривать ее по ссылке в главном меню 
сайта «О нас», то в области контента страницы сопѓасіѕ.рћр дол- 
жен быть размещен следующий код (как только мы вставляем 
в какую либо страницу фрагмент РНР, страница должна быть 
переименована с расширением .рһр): 


<?рһр 
// Подключаем базу данных 
іпс1џиае("абсоппесё.рћр"); 
// Получаем все строки, которые есть в таблице гетагЕ$ 
$ге$и1+ = $ту54а11->ачегу("5ЕТЕСТ * ЕВОМ гетагкѕ"); 
// Начинаем строить таблицу, присваиваем ей имя Заре 
$+абр1е = "<+ар1е»"; 
// Начинаем Вести счетчик отзывов (строк в таблице) 
$К = 1; 
// Начинаем цикл, позволяющий Вывести Все отзывы из таблицы 
гетагЁ$ 
мһі1е ($тугом = $гези1{->+ефсп_а$$0с()) { 
$+аб1е .= "<іг»>"; 
$ъаб1е .= "<+а»".фтугом[ 'ета']."</%а»"; 
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фёаБ1е .= "<{а>" .$тугом[ 'ехі']."</&а»"; 
$Еаб1е .= "</+г>"; 
$К++; 

} 

// Закрываем таблицу 

$+аБ1е .= "</фаб1е>"; 


// Выводим сформированную таблицу 
есһо $+аБ1е; 
?> 


Результат должен получиться примерно таким: 


ПУТЕШЕСТВУЙ С НАМИ! 









Путешествие в 
октябре 2020 г 





У нас множество претензий к 
организации путешествия 
Это сайт, предназначенный для обучения 


Шаг 7. Выход из сессии. 

Далее нам нужно понять, как обработать ссылку «Выйти» 
на главной странице сайта. Она должна прервать сессию дан- 
ного пользователя и вновь показывать варианты Регистрация 
и Авторизация. Нам необходимо очистить переменные сессии 
и перенаправить пользователя на главную страницу, на кото- 
рой после проверки будет выбран вариант загрузки, соответ- 
ствующий неавторизованному доступу. 

Для этого создадим еще один файл ехи.рйр: 


<?рһр 
ѕеѕѕіоп ѕёагї(); 
ѕеѕ5іоп ипѕеЁ(); 
Ѕѕеѕѕіоп ӣеѕігоу(); 
Неааег ( "Госа1оп: іпаех.рһр"); 
?> 


Тодт: @й Ббооокѕ 


Практическая работа № 7 
ГЕНЕРАЦИЯ ДИНАМИЧЕСКИХ СТРАНИЦ 
САЙТА 


Цель: закрепить на практике понимание принципов созда- 
ния динамических уеђ-приложений. 

Инструментарий: 1) любой современный браузер; 2) лю- 
бой редактор программного кода; 3) пакет разработчика Ореп 
сегуег. 


Задания 


1. Изменить созданный в предыдущих заданиях сайт таким 
образом, чтобы при помещении новой информации в БД о но- 
вых турах на главной странице автоматически появлялась дина- 
мическая галерея, а при щелчке по кнопке «Подробнее о туре» 
открывалась динамически сгенерированная новая страница 
с подробными сведениями об этом туре. 

2. Выполнить подобные (по использованным технологиям) 
действия для своего сайта. 

Шаг.1. Шаблонизация странии. 

Чтобы можно было генерировать страницы динамически, 
на основании информации, получаемой из базы данных, не- 
обходимо разбить каждую страницу физически на отдельные 
компоненты (шапку, меню, контентную часть, подвал). Таким 
образом можно достичь двух целей. 

1) размер каждой страницы уменьшается, так как можно 
хранить шапку, меню и подвал сайта в специальных файлах 
шаблона, которые подключаются к каждой странице; 

2) изменяется только контентная часть каждой страницы. 

Скопируем и разместим в спецальной папке (рі шапку сайта 
под именем ћеадег.рһр: 


<!БОСТУРЕ И%т1> 


<һеаа> 
<тефа сһагѕеё = "иғ-8"> 
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<тефа пате = "уіемрогі" сопёепі = "міаёһ = Яеуісе-міаёпһ, 
іпііа1-ѕса1е = 1, Ѕһгіпк-Ёо-ћЁ = по" > 
<!-- Стиль Бооф$гар --> 
<Ііпк ге1 = "ѕ%у1Іеѕһее" һгеҒ = "сѕ5/брооёѕгар.тіп.сѕ5" > 
<1-- Собственный стиль --> 
<Ііпк ге1 = "ѕ+у1Іеѕһее" Пге+ = "сѕ5/51+у1е.сѕ5" > 
<{1{1е>Сайт туристической компании< /©ії1е» 
</һеаа> 
<Боду с1аѕ5ѕ = "боау-+ор"> 
<аіу іа = "сопёепі" > 
<һеааег с1а$$ = "сопёаіпег-йиіа 
<аіу с1а$$ = "гом" > 
<аіу с1а$$ = "со1-3"> 
<іте іа = "1050" $гс = "іте/1ово.јрв"> 
</аім> 
<аіу с1а$$ = "со1-9"> 
<һ1>Путешествуйте с нами! </һ1> 
</аім> 
</аім> 
<?рһр 
// Проверяем, пусты ли переменные логина и їа пользователя 
1+ (етру($ 5Е551І0№[ '10ріп']) ог етрёу(% 5Е55ІОМ['1а'])) 


> 


{ 
?> 
<аіу с1а$$ = "гом"> 
<аіу с1а$$ = "со1"> 
<аіу іа = "аоһ Б1Іоск"> 
<аіу іа = "1іпк_геріѕёег" > 
<а Вге+ = "геріѕіг.рһр">Регистрация</а> 
</аіу> 
<аіу іа = "1іпк_аић" > 
<а Пгеф = "ауёог.рһр">Авторизация</а»> 
</аіу> 
</аіу> 
</аім> 
</аім> 
<?рһр 
} 
е1ѕе 
{ 
?> 
<аіу с1а$$ = "гом" > 
<аіу с1аѕ5 = "со1"> 
<аіу іа = "ехі Б1оск"> 
<аіу іа = "1іпк гемагк" > 
<а Иге+ = "гетагК$ .рИр">Вы можете оставить отзыв</а> 
</аіу> 
<аіу іа = "1іпк_ехі+"> 
<а һгеҒ = "ехіЁ.рһр">Выход</а»> 
</аіу> 
</аіу> 
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</аіу> 
</аім> 
<?рһр 
} 
?> 
</һеаег> 


Аналогично, сохраним в отдельных файлах пау.рћр и јооѓег. 
рһр в папке {р| код для меню и подвала каждой страницы. 
После этого файл таех.рйр можно переписать так: 


<?рһр 
// Запускаем сессию 
ѕеѕѕіоп_ѕ+аг+(); 
// Подключаем файлы для шапки и меню 
іпс1иде ('+р1/һеайег.рһр'); 
іпс1иде ('+р1/пам.рһр'); 


?> 

<! -- Здесь будет описание содержимого главной страницы -- > 
<та1п с1а$$ = "Яех"> 

</таіп> 

<?рһр 


//подключаем файл для подвала 
іпс1иае ('&р1/#ооёег.рһр'); 
?> 


Убедитесь в том, что все компоненты шаблона подключи- 
лись, а главная страница сайта выглядит также, как и до ша- 
блонизации. 

Теперь нужно так же изменить и все остальные страницы 
сайта — оставить на каждой странице только основное содер- 
жимое в области таіп, а выше и ниже этой области подклю- 
чить внешние шаблоны шапки, меню и подвала. Так, напри- 
мер, страница гесіѕіт.рһр теперь может быть переписана так: 


<?рһр 
іпс1иде ('+р1/һеайег.рһр'); 
іпс1иде ('+р1/пам.рһр'); 
?> 
<та1п с1аѕ5 = "Пех" > 
<ћ2>Регистрация</һ2> 
<Ғогт асёіоп = "ѕаме иѕег.рһр" пеёһоа = "роѕі" > 
<р» 
<1абе1>Ваше имя: <Бг></1абе1» 
<іпри паме = "паме" уре = "ех" ѕіғе = "15" мах1епёеИ = 
"15" 
</р> 
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<р» 
<1абе1>Ваш логин: <6г></1абе1» 
<іприє пате = "1оріп" +уре = "Техї" ѕіле = "15" тах1епе&һ 
= "15"> 
</р> 
<р» 
<1аре1>Ваш пароль: <Бг></1аБе1> 
<1приЕ паме = "раз5" уре = "раѕѕмога" ѕіғе = "15" 
тах1епёЕИ = "15" > 
</р> 
<р» 
<іприё Журе = "ѕибтії" пате = "ѕибртії" уа1ие = "Зареги- 
стрироваться" > 
</р> 
</Тогт> 
</та1п> 
<?рһр 
іпс1иае ('&р1/Ғооёег.рһр'); 
?> 


В результате эта страница будет выглядеть так (фрагмент): 


Стиииит7анинигзи 
Регистрация 





Ваш логин: | 
Ваш пароль: 


Зарегистрироваться 


Шаг 2. Создание таблицы базы данных для хранения ин- 
формации о турах. 

В созданной ранее базе данных средствами РНРМуАатт 
создадим новую таблицу следующей структуры: 


Имя таблицы: |1оиг$ Добавить |1 поле(я) «ОК 
Структура м4 
Имя Тип 3 Длина/значения По умолчанию 5 Сравнение Атрибуты МиЙ Индекс 
м 

а ІМТ , Нет " М у РЕІМАВҮ 

а МАВСНАЕ "| [ео Нет ы " М 

ргодгатгт ТЕХТ ' Нет 

МАВСНАЕ М Му Нет ы ы у 


ро 60 


Таким образом, в этой таблице можно будет сохранять иден- 
тификатор тура, его наименование, его программу и одно изо- 
бражение. 

Добавим в таблицу несколько туров так, чтобы сведения 
о них могли заменить те, которые сейчас расположены статич- 
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но на главной странице сайта, и дополнительно еще один тур, 
например, в Санкт-Петербург. 

В результате заполненная таблица будет выглядеть пример- 
но так: 


іа пате ргодгатт рһоѓо 

1 Крым Приглашаем вас в туры по горному Крыму в период с... іто/сгітеа.јро 
2 Кавказ Лучшие морские курорты Кавказа ждут вас ітд/камкКаг јро 
3 Алтай Приглашаем Вас в тур по предгорьям Алтайских гор н... ітод/аќау.јро 

4 Санкт-Петербург Незабываемые впечатления от дворцов и парков север... ита/реег.ра 


Шаг 3. Создание динамической галереи. 

Выведем на главной странице вместо прежней статической 
галереи динамическую, то есть содержащую сведения о тех ту- 
рах, которые есть в таблице ѓоигѕ БД ігауеї. 

Ниже описана только область таш страницы таех.рйр: 


<та1п с1аѕ5 = "Яех"> 

<а1у с1аѕ55 = "гом"> 

<аіу с1аѕ5 = "со1"> 
Наши новые туры 

</аіу> 

</аіу> 

<аіу с1аѕ5 = "сопЁаіпег-йиїіа" > 
<?рһр 


// Выполняем подключение к БД 

// Файл ађбсоппес+.рһр должен быть в той же папке 

іпс1иае ("абсоппесё.рһр"); 

// Получаем все данные, имеющиеся в таблице Тоиг$ 

фгеѕи1+ = $туза11->ацегу ("ЗЕЁЪЕСТ * ЕВОМ +оигѕ"); 

/* Формируем область в переменной $\1у, в которую Вв цикле 
помещаем Все имеющиеся в базе туры (их фото и наименование в виде 
ссылки) */ 


$аіу = '<аіу с1аѕ5 = "гом">'; 
ФК = 1; 
мһі1е(Фтугом = $геѕи1&->+Ғеёсһ аѕѕос()) 
С 
фаіу .= '<аіу с1а$$ = "со1"> 
<аіу с1аѕ5ѕ = "соипїғу">'; 
фаіу .= '<іте ѕгс = '.фтугом[рһо+о].'>"; 
$аіу .= '<р><а һгеҒ = >'.$тугом[ 'паме' ].'</а></р>'; 
$аіу .= '</а1\у></а1м>'; 
$К++; 
} 
фаіу .= '</аім>'"; 


// Выводим на экран содержимое переменной $1іү 
есһо $аіүу; 
?> 
</аіу> 
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Получим такую страницу іпдех.ћёті: 
ПИ ЗИ | нант | оне | 


Наши акцин 








Проверьте, как изменится содержимое страницы, если к та- 
блице ѓоигѕ средствами РНРМУуАатіп добавить еще один новый 
тур. 

Шаг 4. Создание динамических страниц о любом из ту- 
ров. 

Далее нам необходимо понять, как вывести страницу, содер- 
жащую более подробные сведения о любом туре, при нажатии 
на соответствующую ссылку на главной странице. Понятно, 
что структура этой страницы одинакова для всех туров, однако 
в каждом случае должна выводится информация только из соот- 
ветствуюшей строки таблицы. Поэтому при нажатии на ссылку 
под каждой фотографией на главной странице должна откры- 
ваться страница ѓоиг.рћр, но при этом в ее контентную часть 
должны выводиться данные только из одной строки таблицы 
ѓоигѕ, 14 которой воответствует выбранному туру. Это может 
быть выполнено за счет передачи іа в ОКІ страницы ѓоиг.рћр. 

Внесем следующие изменения в код страницы шаех.рНр: 


<та1п с1аѕ5 = "Яех"> 
<а1у с1аѕ55 = "гом"> 
<аіу с1аѕ55 = "со1"> 
Наши акции 
</аім> 
</аіу> 
<а1у с1аѕ5 = "сопЁаіпег-йиїіа" > 
<?рһр 
іпс1иае ("абсоппесё.рһр"); 
фгеѕи1+ = $ту$а11->ацегу ("ЗЕЁЪЕСТ * ЕВОМ +оигѕ"); 
$аіу = '<аіу с1аѕ5 = "гом">'; 
ФК = 1; 
м011е($тугом = фгеѕи1+->Ғеёсһ аѕѕос()) 
{ 
$аіу . = '<аіу с1а55 = "со1"> 
<аіу с1аѕ5 = "соип®гу">'; 
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/* Здесь мы сохраняем 6 переменной $14 значение каждой 

из перебираемых В цикле строк тура из таблицы Фоиг$ базы данных */ 
$14 = $тугом[іа]; 
/* Далее при формировании ссылки этот Та встраива- 

ется 6 адрес, на который указывает ссылка. Обращайте Внимание 

на использование кавычек! */ 


$А1\ „= '<ітр ѕгс = '.фтугом[рһо+о].'>"; 
$аіу .= "<р><а пге = Ёоиг.рһр?іа = $19>".$тугом [ пате]. '</ 
а></р>'; 
$аіу .= '</41\></41м>'; 
$К++; 
} 
фаіу . = '</аім>'"; 
есһо $аіүу; 
?> 
</аіу> 
</та1п> 


Таким образом, при переходе по любой из ссылок под фо- 
тографией тура мы получим переход на страницу ѓоиг.рћһр, 
но с параметром, совпадающим с номером этого тура в табли- 
це БД. Например, при выборе второго тура в адресной строке 
браузера должно появиться: 


Не защищено | їгаме[/оиг.рһћр?1= 2 


Этот способ позволяет также передать параметр странице 
ќоиг.рһр и использовать его для поиска нужной информации 
в БД для последующего отображения ее на странице. Параметр 
передается из ОКІ на страницу методом СЕТ. Ниже представ- 
лен код страницы ѓоиг.рћһр. 


<?рһр 
іпс1иаде( 'р1/һеаег.рһр'); 
іпс1иаде( '&р1/пау.рһр'); 


?> 
<та1п с1аѕ5 = "ех" > 
<а1у с1аѕ55 = "гом" > 
<аіу с1аѕ5 = "со1"> 
Актуальная информация о туре: 
</аіу> 
</а1\> 
<А1у с1аѕ5 = "сопЁаіпег-#иїіа" > 
<?рһр 


// Подключаемся к базе данных 
іпс1џоае( "абсоппес* .рНр"); 
/* Получаем из ОВІ страницы Та именно того тура, информацию 
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о котором нужно разместить на этой странице сейчас */ 

$1аре1 = ‘іа’; 

$14 = Ға1ѕе; 

1+ (!етрфу($_бЕТ[$1аре1])) { 

$14 = $ СЕТ[$1аБе1]; 

} 

/* Выполняем запрос к таблице Фоиг5 БД, чтобы получить все 
сведения о туре с данным та */ 

$геи1* = $му$а11->ачегу ("ЗЕТЕСТ * ЕКОМ Фоиг$ ИНЕВЕ іа = 
'$1а'"); 

/* Преобразуем строку, полученную в результате запроса 
6 ассоциативный массив, чтобы можно было обращаться к каждому зна- 
чению по имени поля 6 таблице */ 

$тугом = фгеѕи1+->Ғеїсһ аѕѕос(); 

/* Формируем переменную, содержащую структуру выводимых зна- 


чений */ 
фаіу = '<41\у с1аз$ = "гом">'; 
фаіу .= '<аіу с1аѕ5 = "со1"> 
<даіу с1аз5 = "соип®гу">'; 
$1а = $тугом[1а]; 
$аіу .= '<1ив эгс = '.фтугом[рһо+о].'>"; 
$А1\ .= '<р>'.фтугом[ пате]. '</р>"; 
$А1\ .= '<р>'.фтугом[рговгатт]. '</р> "; 
фаіу .= '</аіу></аіу>'; 
фаіу .= '</аіу>'; 
// Выводим содержимое этой переменной 
есһо $41м; 
?> 
</аїу> 
</та1п> 
<?рһр 
іпс1иае( 'Ер1/+ооёег.рһр'); 
?> 


В результате получим полную информацию именно о том 
туре, который был выбран на странице іпӣех.рһр. 


Приглашаем Вас в тур по предгорьям Алтайских гор на лошадях 
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Практическая работа № 8 
ИСПОЛЬЗОВАНИЕ КЕАСТ ДЛЯ 
ПРЕДСТАВЛЕНИЯ ИНФОРМАЦИИ, 
ПОЛУЧЕННОЙ С СЕРВЕРА 


Цель: опробовать на практике современные принципы рен- 
деринга меБ-страниц. 

Инструментарий: 1) любой современный браузер; 2) ре- 
дактор программного кода; 3) пакет разработчика Ореп Ѕегуег. 


Задания 


1. Переверстать страницу іпаех.рһр, разработанную в ходе 
выполнения лабораторной работы № 8, так, чтобы меЬ-страница 
с данными из БД формировалась не на сервере с использовани- 
ем РНР, а в браузере с применением фреймворка ЈЅ Веасе. 

2. Выполнить аналогичные действия для своего сайта 


Выполнение задания 1 


В предыдущей практической работе мы формировали дина- 
мическую страницу с карточками туров на сервере средствами 
РНР и передавали уже готовый НТМГ-код с сервера для ото- 
бражения в браузере. Сейчас мы выполним «отрисовку» стра- 
ницы на языке ЈауаЅсгірі в самом браузере, используя данные 
текстового файла /5ОМ, который будет передаваться с сервера. 

Шаг 1. Создание РНР-сервиса для получения результата 
запроса к базе данных в формате ЈЅОМ. 

Создадим в папке проекта следующий файл с именем арі.рћр: 


<?РНР 
// Подключаем файл соединения с базой данных 
1ис1и4де ("Ябсоппесі.рһр"); 
// Выполняем нужный запрос к базе данных 
// Извлекаем из базы все данные об имеющихся турах 
$ге5и1* = $ту5а11->ачегу ("ЗЕТЕСТ * ЕВОМ +оиг5$"); 
// Создаем новый пустой массив 
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$+оигѕ = []; 

// Записываем все туры из таблицы БД в строки этого массива 

мһі1е(Фтугом = $геѕи1+->+ҒеЁсһ аѕѕос()) { 

$+оигѕ[] = тугом; 

т 

// Сохраняем данные полученного массива В текстовый файл формата 
250№ 

һеааег( 'Сопёепё-+уре: арр1іса+іоп/јѕоп'); 

есһо јѕоп епсоде($ёоигѕ); 
?> 


При попытке запустить этот файл через локальный меБ- 
сервер вы увидите текстовый файл, в котором можно распоз- 
нать структуру таблицы (0игѕ БД. 

Шаг 2. Изменение файла таех.рйр 

Изменим файл іпаех.рһр следующим образом: 


<?рһр 
// Запускаем сессию 
ѕеѕѕіоп ѕЁагі(); 
/* Подключаем измененный файл Веааег, так как теперь он должен 
содержать ссылки на подключаемую библиотеку ВеасЕ*/ 
іпс1иде (р1/һеадег.рһр?); 
іпс1иае ('&р1/пау.рһр'); 


?> 
<та1п с1аѕ5 = "ех" > 
<аіу с1аѕ5 = "гом" > 
<аіу с1аѕ5 = "со1"> 
Актуальные направления путешествий 
</аіу> 
</аіу> 
<аіу с1аѕ5 = "сопЁаіпег-йиїіа" > 


<1-- Область отрисовки динамического содержимого страницы просто 
описана контейнером с Та = гост --> 
<аіу іа = "гоо" > 
</аіу> 
</аім> 
</та1п> 
<?рһр 
// Подключение нового файла Ғоотег.рһр 
1пс1и4де ( р1/+ооёег.рһр? ); 
?> 


Шаг 3. Изменения в файле Һеадег.рһр. 


<!БОСТУРЕ ћЕм1> 


<Веаа> 
<!-- Ведитгей тета Тад$ --> 
<тефа сһагѕе = "иЁҒ-8" > 
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<тефа пате = "уіемрогі" сопфепе = "міаёһ = Яеуісе-міаёпһ, 
іпііа1-ѕса1е = 1, Ѕһгіпк-Ёо-ћЁ = по" > 
<!-- Стиль Бооф$гар --> 


<Ііпк ге1 = "ѕ%у1Іеѕһее" һгеҒ = "сѕ5/рооёѕ1гар.тіп.сѕ5" > 
<!-- Собственный стиль --> 
<1іпк ге1 = "ѕ+у1Іеѕһее" Пге+ = "сѕ5/5+у1е.сѕ5" > 


<!-- Добавление внешних ссылок на файлы из библиотеки Веаст. 
Взяты с сайта ВеасЕ --> 

<ѕсгірё $гс = “НЪрз: //ипрке . сот/геас*@16/ита/геас* .деме1ортеп*. 
ј5”></5сгірі> 

<ѕсгірё $гс = “һЕёрѕ : //ипрке . сот/геас*-4от@16/ита/геас*- аот. 
дӢеуе1ортеп+. $” ></ѕсгірі» 

<ѕсгірі $гс = “Ире: //ипрке . сот/бабе1-ѕ+апа1опеф@6.15.0/бађе1. 
піп.95></5сгірі»> 

<{1{1е>Сайт туристической компании< /&іТ1е> 


</Неаа> 
<Боду с1аѕѕ = "боау-+ор"> 
<аіу іа = "сопёепі" > 
<Пеадег с1аѕ5 = "сопёаіпег-#иїіа "> 
<а1у с1аѕ55 = "гом" > 
<аіу с1аѕ5 = "со1-3"> 
<іпе іа = "1оро" ѕгс = "іте/1оро.јре"> 
</аіу> 
<А1у с1аѕ5 = "со1-9"> 
<ћ1>Путешествуйте с нами! < /ћ1> 
</аім> 
</аіу> 
<?рһр 


// Проверяем, пусты ли переменные логина и іа пользователя 
1+ (етр+у(% 5Е5510№[ '1овіп']) ог етр+у($ 5Е55ІОМ№[ '1а'])) { 


?> 
<аіу с1а$$ = "гом"> 
<аіу с1а$$ = "со1"> 
<аіу іа = "аиёһ Б1оск"> 
<аіу 14 = "1іпк_ геріѕ+ег" > 
<а Нге+ = "геріѕіг.рһр">Регистрация</а»> 
</аіу> 
<аіу іа = "1іпк аиёһ" > 
<а Иге+ = "ауфог.рИр" >Авторизация</а> 
</аіу> 
</а1\> 
</а1\> 
</аім> 
<?рһр 
} 
е15е 
{ 
?> 
<аіу с1а$$ = "гом"> 
<аіу с1а$$ = "со1"> 
<аіу іа = "ехіЄ Б1Іоск"> 
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<аіу 14 = "1іпк гемагк" > 
<а һгеҒ = "гетагК$ .рИр">Вы можете оставить отзыв</а> 
</аім> 
<аіу іа = "1іпк ехі+"> 
<а һгеҒ = "ехіЁ.рһр">Выход</а» 
</аім> 
</аім> 
</аім> 
</аім> 
<?рһр 
3 
?> 
</Неадег> 


Шаг 4. Изменение файла јооѓег.рһр. 

В файл подвала необходимо внести изменения так, чтобы 
он вызывал скриптовый файл ту.јѕ, который и будет выполнять 
основную функцию: получать данные из файла ЈЅОМ и визуа- 
лизировать их на странице таех.рйр. 


<Фоофег с1а$$ = "Фоофег" > 
<аіу с1аѕ5 = "гом"> 
<аіу с1аѕ5 = "со1"> 
Это сайт, предназначенный для обучения 
</аіу> 
</аіу> 
</Ғоо+ег> 
</аіу> 


<!-- Подключение внешних библиотек Ј5 --> 

<!-- Строки взяты со стартовой страницы Бооф$Егар и ВеасЕ --> 

<5СГ1рЕ гс = "Пре: //соде. јдиегу.сот/јаиегу-3.4.1.51іт.тіп.јѕ" 
іпёергіу = "5Па384-3649а484961Е2-+ротТ4\мпуКкпу5\у7Е5$гРо01Е]мВУКУ71тбЕ 
АМдммј1уүҒоК5Ј02+п" сгоѕѕогіріп = "апопутоиѕ" >< /зсг1рЕ> 

<5СГ1рЕ гс = "Пре: //сап. ] 54е11уг .пе*/прт/роррег. ]5$@1.16.0/ 
аіѕ/ита/роррег.тіп.јѕ" іпёергіу = "5Йа384-О6ЕЭКНУБТУ {Е 0+2 
тЈбНаЕм1а1У1910Үу5п32\922ТЕтІЗОКѕа0А\\уохМҒооАдо" сгоѕѕогіріп = 
"апопутоиѕ" ></сг1ре> 

<ѕсгірі ѕгс = "һҺіЕрѕ : //ѕ+аскра+һ.бооѕёгарсап. сот/ 
рооЁѕігар/4.4.1/)5/бооёѕігар.тіп.ј5" іпёергібу = "5һа384-м#50 
Е2Е56Ү2р1и0ајёозимвјпји0р4ІҺ7Үмаүа1іа+ҒкЕје0оавссЕх130681і+мВб" 
сгоѕѕогіріп = "апопутоиѕ"></5сгірї> 


<!-- Подключение собственного Ј5-файла --> 

<!--тип фехе/Бареё указывается для совместимости с браузерами 
более ранних версий --> 

<5сг1ре фуре = "фехЕ/БаБе1" ѕгс = "јѕ/ту.јѕ"></5сгірё»> 
</Боду> 
</ћм1> 
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Шаг 5. Описание файла ту.}5. 

Основной файл при применении данной технологии ренде- 
ринга — это файл /5, который содержит код для получения внеш- 
них данных в формате ЈЅОМ№ и отображения их на странице с при- 
менением библиотеки Кеасі. Теоретические сведения об этой 
библиотеке приведены в п. 5.9. первой части данного пособия. 

Напоминаем, что структура таблицы с турами, данные 
из которой должны динамически отображаться на этой стра- 
нице выглядит так: 


іа пате ргодгатт рћоќо 

1 Крым Приглашаем вас в туры по горному Крыму в период с... іто/сгітеа.јро 
2 Кавказ Лучшие морские курорты Кавказа ждут вас ітод/Ккамкаг.јро 
3 Алтай Приглашаем Вас в тур по предгорьям Алтайских гор н... іто/аіќау.јро 


4 Санкт-Петербург Незабываемые впечатления от дворцов и парков север... ито/реегрд 


Файл ту.) с комментариями приведен в следующем листинге. 


/* Описываем функцию, которая "умеет" представлять на странице 
отдельные элементы компонента Веасї с использованием блочной вер- 
стки. Компонент 6 данном случае представляет собой карточку тура, 
включающую фото, и наименование тура. Ргор$ - это параметр, кото- 
рый позволяет обрабатывать Внешние для компонента данные */ 
Ғипсёїіоп Тоиг(ргорѕ) { 


геёигп ( 
<аіу с1аѕѕМате = "сага" > 
<аіу с1аѕѕМате = "сага-1т8"> 


/* выводим фото тура по имени соответствующего поля 
в таблице БД */ 
<іте с1аѕѕ5Мате = "Єоиг-іте" ѕгс = {ргорѕ.+оиг.рһоёо} /> 
<ћ3> 
/* выводим название тура как гиперссылку на динамиче- 
скую страницу */ 
/* параметром 6 ЦВЕ Вызываемой страницы Выступает 


та тура */ 
<а с1а55Мате = "Фоиг-геф" 
Вге+ = {"Еоиг.рһр?іа = "+ргорѕ.+оиг.іа}>{ргорѕ. 
оог. пате} 
</а> 
</һ3> 
</аім> 
</аім> 
) 
1 


/* Описываем класс компонента Арр (приложение), наследуемого от ком- 
понента КеасЕ в котором имеется его состояние (ѕ+аёе) - в данном 
случае набор всех возможных значений и рендеринг (гепаег) - отри- 
совка на странице шаблона со связанным с ним состоянием */ 
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с1аѕѕ Арр ех+епаѕ ВКеас+. СотропепЁ 

/*объявляем объект, который описывает состояние компонента 
$фафе*/ 

$фафе = {оуг5:[]} 


/* Создаем объект, который асинхронно может запросить у сервера 
данные через созданный нами ранее файл арі.рһр и распознать эти 
данные как Ј50№. Здесь для этого используется современный интер- 
фейс 725$, который называется Еефсй АРТ */ 

КежсиОчцо*е$ = () = > { 

+һіѕ.ѕеЅФае({...Еһіѕ.5ѕ+ае, іѕҒесһіпв: %гие}) 
Ғесһ("арі.рһр") 
.Еһеп(геѕропѕе = > геѕропѕе.јѕоп()) 
/* Здесь полученные данные связываются с объектом, описанным 
Выше как состояние компонента */ 
.ЕВеп(гези1 = > {[15$.зе%5{аже({Фоиг$: гези1, 15РефсИ1тв: 
Ға15е})) 
.сасһ(е = > сопѕо1е.1ор(е)); 


} 


/* У компонентов КеасЕ есть методы жизненного цикла, 
которые позволяют сохранять актуальное состояние. Метод 
сотропепОтаАМоип*() Вызывается, когда компонент становится доступ- 
ным. Поэтому здесь мы непосредственно получаем данные */ 
сотропеп&ріамоипё () + 
+һ1іѕ. Ғесһдио+еѕ() 


} 


/* Здесь мы указываем как на странице будет выполняться отри- 
совка (рендеринг) компонента */ 
гепаег() { 
соп5о1е.1о5(+[1$.5фафе) 
геёигп ( 
/* Создается обертка, которая может быть использована затем 
6 С55 */ 


<аіу с1а55Мате = "арр"> 
<41\у с1аѕѕМате = "11$4"> 
<аіу с1а$$ = "гом"> 
{ 


/* Выполняется отображение каждого текущего состояния 
компонента с использованием ранее описанной функции представления 


Тоиг5 */ 
{И15.5фа%е.+оиг$ .тар(%очг => { 
геёигп ( 
<аіу с1аѕ55 = "со1"> 
<Тоиг фоиг = {Еоиг} /> 
</аіум> 
) 
} 
) 
р 
</аіу> 
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</аіу> 
</аіу> 
) 
} 
} 


// Вывод отрисованных шаблонов в отведенное для них место на стра- 
нице іпаех.рһр 
Кеас+ром. гепаег(<Арр />, аоситеп*. веЕЕ1етепЕВутІа( 'гоо*')) 


Вы можете заметить, что при описании классов элементов 
НТМЕ в Кеасі используется параметр сІаѕ5Мате вместо с1а. 
При этом в С$5 такие классы описываются также как обычно. 

В результате после уточнения таблицы стилей, связанных 
с описанными классами элементов компонента, при запуске 
страницы таех.рйр получим примерно такой результат: 


Актуальные направления путешествий 





Алтай 







_Кавка3 


Еанкт-Петербурі 


За счет передачи параметра в ОКІ гиперссылки мы получа- 
ем переход на соответствующую страницу {оиг.р|р: 


Путешествуйте с нами! 


[сене навана [еже 


Актуальная информация о туре: 





Санкт-Петербург 


Незабываемые впечатления от дворцов и 
парков северной столицы! 
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Практическая работа № 9 
СОЗДАНИЕ САЙТА В СРЕДЕ МОВОРВЕ$$ 


Цель: получить представлении о технологии создания сай- 
тов с применением СМ систем. 

Инструментарий: 1) любой современный браузер; 2) пакет 
разработчика Ореп 5егует. 


Задания 


1. Создать сайт, реализующий примерно те же функции, что 
и сайт, созданный в предыдущих практических работах с ис- 
пользованием возможностей СМ5 М/огаРтез$. 

2. Создать собственный сайт с использованием той же тех- 
НОЛОГИИ. 


Выполнение задания 1 


Шаг 1. Создание базы данных сайта. 

ҮогарРгеѕѕ — это СМ$ система, которая хранит все данные 
сайта в базе данных Му$41. Поэтому нам необходимо создать 
пустую базу данных, которая будет подключена к будущему 
сайту 

Запустим локальный сервер Ореп5$егуег, после его запуска 
выберем в меню Дополнительно пункт РНРМУуАатіп. В брау- 
зере откроется программа для создания базы данных. 

При входе система запросит логин и пароль, введем логин — 
гоої, а поле «Пароль» оставим пустым. 

Базу данных называем, например, “туОВ”, устанавливаем 
кодировку ш#-8 зепега|-с и нажимаем кнопку «Создать», как 
показано ниже: 


є С Ф 127.00.1/орепѕе пуайтіп/ѕегуег баќађаѕеѕ.рі 


рһрМуАатіп - 29 Сервер: 127.0.0.1:3306 


бё Базы данных „2 $501. Ф Состояние г Учетные записи пользов 





18090%2 
Недавнее Избранное {Ф Базы данных 
=: Ф Создать базу данных @ 
> Создать БД 
2-6% огтаНоп_зспета Ммурв | ш#8 _депега! сі "Создать 


І 
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Появится окно «МУОВ была создана». При этом нужно пом- 
нить, что если не указывать ничего иного, то у этой БД имеется 
пользователь с максимальными правами под именем гоої, у ко- 
торого по умолчанию нет пароля. 

Шаг 2. Установка М/огаргеѕѕ. 

Скачиваем СМ$-систему со страницы ћїрѕ:/ /ти.уогӣргеѕѕ. 
оге /мгогіргеѕѕ-5.0.8-ги КО.7ір. На момент написания пособия 
актуальной версией была 5.4. Распаковываем содержимое это- 
го архива в папку, которая соответствует имени вашего сайта 
(например «пем»): .\ОЅРапе/\аотаіпѕ\пеу. 





Обратите внимание! Папки мр-аатіп, ир-сопїепї, мр-іпсіийеѕ и дру- 
гие файлы должны располагаться по следующему адресу» ..\О$Рапе!\ 
аотаіпѕ\пеи“, а НЕ В ПАПКЕ ..\О$Рапе\4отатз\игогаргезз\пем“. 





Указываем в адресе браузера путь: Һр: / Лосаћоѕі/пемг/. 
Должно появиться окно начала настройки Мїогаргеѕѕ. 

Выбираем русский язык 

Указываем следующие настройки: 


Веіом уои Рош епіег уоиг даіабаѕе соппеспоп беіаііє. № уоџ'те пої эиге або 1ћеѕе, сопіасі уоиг һоѕї 
Оаќабаѕе Мате МуОВ ће пате о! ће даѓаЁ зш мапі їо иѕе 
иһ МР 
Чѕегпате гоо! ү Фата! т 
Раззмюога НаБа5 і 
ОаѓаБаѕе Ноѕ? Іосаіһоѕ+ Ус вю Бе абе 10 сеї 1һіє НГО їго г 
меф поз, Й 1оса1һоз? оеѕту! моих 
ТаЫе Ргейх мр И уои угап 10 гоп тирі Мого 
ипзлаНа ое пою аа! м 
1 


Далее, запускаем установку, снова подтверждаем выбор 
языка и заполняем следующее окно так: 








Пожалуйста, укажите следующую информацию. Не переживайте, потом вы всегда сможете изменить эти 
настройки 
Название сайта Путешествуйте с нами! 
Имя пользователя адтт 
Имя пользователя может содержать только латинские буквы, пробелы 
подчёркивания, дефисы, точки и символ @ 
Пароль | адтип $5 Скрыть 
Очень слабый 
Важно: Этот пароль понадобится вам для входа. Сохраните его в надёжном 
месте 
Подтвердите пароль м Разрешить использование слабого пароля 
Ваш е-тай Мапом@® тзай.ги 
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Пароль необходимо ввести и запомнить, он понадобиться 
для входа в административную панель. 

Теперь мы можем работать в двух режимах — в режиме ад- 
министрирования сайта и в режиме его просмотра. 

Для перехода к администрированию требуется вводить 
в адресной строке: пем//мр-аапит. Результат: 


юсаіћоѕі, 


| 1оступен МуогаРгеѕѕ 5 4! Пожалуйста, обновигесь. 





Консоль 
Добро пожаловать в М/огарРгеѕѕ! 


Для начала Следующие шаги 


Б напишите свою перпую запись 





+ Создайте страницу «Обо мне» 





Просмотрите свой сайт 


Для просмотра сайта нужно ввести адрес пем/. При этом ре- 
зультат будет таким: 


БЕЗ РУБРИКИ 


Привет, мир! 


ЗА 
Ав 


Д р; аат Е 160 


С 1 комме и 


Добро пожаловать в МогаРгеѕѕ. Это ваша первая запись. 
Отредактируйте или удалите ее, затем начинайте 
создавать! 


Для перехода между этими режимами также могут исполь- 
зоваться две кнопки в верхнем меню программы. 

Итак, сайт уже оформлен в соответствии с некоторой темой 
оформления, содержит одну запись «Привет, мир!» и имеет не- 
которые элементы управления. 

Далее предлагается следующий план создания сайта: 

1) выбрать и настроить тему оформления для сайта; 

2) создать несколько статических страниц; 

3) создать несколько записей, которые будут размещены 
на главной странице в виде новостей; 

4) настроить меню сайта; 

5) настроить дополнительные возможности при помощи 
виджетов; 
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6) настроить дополнительные возможности с помощью пла- 
ГИНОВ. 

Шаг 3. Настройка темы сайта 

Если перейти в консоли по пунктам Внешний вид Темы 
вы можете увидеть встроенные темы. Если ни одна из пред- 
лагаемых тем для оформления сайта вам не подходит, мож- 
но по кнопке Добавить новую просмотреть и добавить одну 
из предлагаемых тем или закачать и установить новую тему. 
Бесплатные темы \У/огаРгез$ можно предварительно найти 
в Интернете, скачать и сохранить в виде 71р-файла. В данном 
случае была применена одна из встроенных тем {тауе| Фат1ез. 

Через меню Внешний вид -> Темы —> Настройки можно до- 
полнительно задать варианты оформления и главной и осталь- 
ных страниц сайта. Например, на главной странице отобража- 
ется главная страница и область для дополнительных функций 
(сайдбар) справа, а на остальных — страница занимает всю го- 
ризонтальную область, а сайдбара нет. Эти настройки зависят 
от выбранной темы. 

Теперь в режиме просмотра сайт выглядит так: 





ЎШ Путешествуйте с нами! 


Привет, мир! 


Шаг 4. Создание статических страниц. 

Сайт состоит из статических и динамических страниц. 

Для создания любой статической страницы необходимо вы- 
брать в консоли Страницы Добавить новую. После это- 
го можно указать название страницы, которое в дальнейшем 
станет пунктом меню для перехода на эту страницу, и создать 
любое содержание страницы, включая текст, рисунки, гипер- 
текстовые ссылки и т. д. 

Важно, что при добавлении элементов в текст страницы 
(кнопка «+») можно создать несколько колонок, которые нам 
нужны для поддержки предыдущего дизайна. Для сохранения 
страницы необходимо нажать на кнопку Опубликовать. 
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аб Путешествуйте с нами! 


и жж 


Наши акции Новости 


Наши акции 





Таким же образом можно создать и другие страницы. Спи- 
сок всех страниц можно просмотреть, отредактировать на- 
стройки и содержимое каждой из них через меню Страницы 
Все страницы. 

Шаг 5. Создание записей. 

Кроме статических страниц большинство современных сай- 
тов содержат новостные страницы, которые обновляются ав- 
томатически, по мере добавления в базу данных новостей или 
записей. 

Перед началом ввода записей нужно продумать, нужно 
ли вам, чтобы пользователи могли их комментировать, в каком 
виде они будут отображаться и т. д. Эти и другие настройки 
можно указать через пункты консоли Настройки -> Написа- 
ние/Чтение/Обсуждение. 

Для создания записей выбираем в консоли Записи -> Доба- 
вить новую и заполняем нужные поля: 

ә > О = 


тась опубликована, Просмотреть хес 


Изменения в программе 
тура 


ЭВТЕЕЧЖЕЕЕФ ЯЕ М 


В программе тура с 5 по 15 апреля произошли изменения 





Таким образом, по мере добавления новостей последние 
будут отображаться на специальной странице новостей. Для 
этого нужно создать специальную страницу, в макете которой 
указать тип Блог. 

Шаг 6. Настройка меню сайта. 

На сайте может быть одно или несколько меню, это зави- 
сит от выбранной темы. В данном случае мы настроим главное 
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(верхнее меню) которое будет содержать ссылки на все ранее 
созданные страницы и динамическую страницу новостей. 

Выберите Внешний вид Меню. Введите название меню 
Главное и нажмите кнопку Создать меню. 

Выберите все страницы из списка слева и добавьте их в ме- 
ню. Можно раскрыть любой из пунктов и изменить, например, 
текст ссылки. 

Далее важно, что если вы хотите получить многоуровневое 
меню, то нужный пункт нужно просто сместить мышкой от- 
носительно того пункта, который является для него родитель- 
ским: 


Добавьте элементы меню Структура меню 


я Е 7 ә е | состен | 





Записи 





Наши акции Новости 
Крым 


Алтай 


Шаг 7. Настройка виджетов. 

Виджет — это небольшое приложение, созданное для реали- 
зации какой-нибудь полезной задачи. В У/огаРге$$ под виджета- 
ми понимают встроенные подпрограммы, которые выполняют 
наиболее часто встречающиеся функции, такие как ведение 
архива новостей, календарь, поиск по сайту, регистрация поль- 
зователей и т. п. Особенность виджетов в У/огаРгез$ в том, что 
их можно быстро разместить в любом месте страницы, которое 
предусмотрено используемой темой. 

В МотаРге$$ есть встроенный набор виджетов. Например, 
если на странице новостей мы хотели бы справа показывать 
некоторую дополнительную информацию можно, через меню 
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Внешний вид —> Виджеты перетащить, например, виджет «Ка- 
лендарь» в соответствующий сайдбар. 


34 Путешествуйте с нами! 





Изменения в программе тура Апрель 2020 


Пн Вт Ср чт Пт бк 


тур переноси 


Читать далее» 70 8 та7:10 
- а _ 


Вообще, все активные области, которые допускает эта те- 
ма, можно увидеть на странице виджетов. 

Шаг 7. Авторизация и регистрация. 

Для реализации функций регистрации и авторизации по- 
сетителей на сайте в М/огаРгез$ имеются встроенные средства. 
Их настройка может быть выполнена через меню Настройки. 

После настройки возможностей оставлять отзывы пользо- 
ватель может зарегистрироваться или авторизоваться и остав- 
лять комментарии на странице записей. 

Шаг 8. Настройка плагинов. 

Плагин, в отличие от виджета, — это внешняя подпрограм- 
ма, которая выполняет дополнительные функции, не предусмо- 
тренные в базовом наборе МогаРгеѕѕ. В стандартной поставке 
УГогаРгез$$ имеется несколько установленных плагинов, напри- 
мер АКіѕтеѓ Апіі-Ѕрат, который позволяет защитить ваш сайт 
от спама. 

Для реализации дополнительных функций можно скачать 
плагины сторонних разработчиков. 
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